Personal Portfolio Page - Stuck with Bootstrap Grid Layout

Personal Portfolio Page - Stuck with Bootstrap Grid Layout
0.0 0

#1

What i want is that the text “Shantanu Tomar” and 3 buttons on screen should come in div #header in a single row. I am using Bootstrap3. Not sure how i can provide col-- tags so that the webpage is visible on Phone, tablet, Laptop in right manner ? I tried using lg and md classes but the buttons are not lining up with text “Shantanu Tomar”.

Thanks for the help :slight_smile:


#2

I suggest you to use Bootstrap 4 instead of 3 since it uses the CSS Flexbox.
Add Bootstrap 4 and add align-self-center class to the div wrapping all the buttons.

<div class="col-md-6 align-self-center">

#3

I will agree with @vikrant17 and advice you to use Bootstap 4. It just came out of alpha and will be the future.

Secondly, I checked your code and found that you are missing some core elements for the bootstrap grid to work.
I will suggest you to visit: https://getbootstrap.com/docs/4.0/layout/grid/ and try to deeply understand how the grid works.

For example, you are missing the:

div class="container">

which should wrap the whole grid. On the link I gave you, you can find more about aligning the elements too.