Question: Use the Bootstrap Grid to Put Elements Side By Side

HTML-CSS
1

Hi, I’m very new to coding and so have many questions :S

Why does the ‘col-xs-4’ need to be in a separate ‘div’ element with the ‘button’?

So this doesn’t work:

image

But this does:

image

Many thanks!

2

The heirarchy is like this:

container

  • row
    – col widths

If you look at the CSS underneath it all:

.container just sets some padding left and right of 15px, and centers it on screen via margin-left/right: auto, and sets the overall width in pixels

.row tries to occupy the whole space of the container by doing negative margins left and right of -15px

and .col-??-nn sets the width of a div element (inside the container/row) via some percentage% value, floats it left so all the divs position themselves side by side, and gives a padding left and right of 15px.

So assigning the class row and col-xs-4 to the same div doesn’t make sense.

https:/uploads/default/original/3X/d/0/d020009672da9c6cb6926a94d8961bf4e57fc81a.png

Here, you’re basically saying on a single row, put these 3 buttons side by side (because col classes have float:left), and center them equally among each other (since BS is a 12-column layout, xs-4 means each div occupies 1/3 of the width, or 33.3333% of the total row width.

xs-4 + xs-4 + xs-4 == 12 columns
so each xs-4 is 1/3 the width, 1/3 or 33.333333%

3

Thanks for your reply! I just thought the two ways were the same.

I’m still new to this so trying to make sense of it all.