Bootstrap 3 Grids explained
Below is my attempt to explain the Bootstrap 3 Grid. At first this, I thought this was going to be difficult, but upon digging in and building my first site with it, I found it to be pretty straight forward. Bootstrap 3 grids are comprised of Containers, Rows, and Columns and those are the three main components. So, here we go. This is a quick and to the point explanation. A cliff notes explanation of sorts.
Containers are responsible for the width. .container gets set to a max-width, but container-fluid extends to the width of the screen.
Containers have 15 pixels of padding on each side so that content will never hit the edge of a container or the screen.
Rows and Columns are percentage based.
All rows have a negative 15 pixel margin.
The main purpose of a row to set up your columns.
All columns float left. Columns should add up to to fill a 12 column grid. For example, a four column layout for a laptop and above would need to use .col-md-3 four times within a row.
Never use a row outside of a container.
Columns have 15 pixels of padding on each side. So, when two columns are placed next to each other there will be a 30 pixel gutter between them.
Never use a column outside a row.
Offsets allow you to push a column right by adding a left margin to the side of the column where the offset is added.
Push and pull, now here is where things get interesting. Push and pull allow you to reorganize or better yet reorder your columns. For example, you might want columns to stack in one order for mobile, but different order for tablet or desktop.
That is the basics in a nutshell. So, in conclusion, a layout for say a footer with 4 columns would look something like this.
<div class=“col-xs-12 col-sm-6 col-md-3” id=“footOne”>Footer column one content</div>
<div class=“col-xs-12 col-sm-6 col-md-3” id=“footTwo”>Footer column two content</div>
<div class=“col-xs-12 col-sm-6 col-md-3” id=“footThree”>Footer column three content</div>
<div class=“col-xs-12 col-sm-6 col-md-3” id=“footFour”>Footer column four content</div>
</div>
Because Bootstrap is based off the “Mobile First” concept, the above html is basically telling the browser that at a mobile device (xs) each column should be set to 12 or full width. Therefore, the four columns will stack on top of each other.
On a tablet (sm), the columns will be set to 6 wide or 50% (two columns with one set of two stacked on top of the other).
On a laptop or larger (md) each column is set to 3 and therefore, it gets rendered as 4 columns in a horizontal row (again, all columns get floated left).