Setting up columns with Bootstrap
Twitter Bootstrap has made it easy to create columns for your webpage content. They have included a responsive grid system that scales and uses a 12 column grid system more accurately called a mobile first fluid grid system.
Bootstrap has taken the smallest screen and created their code accordingly. This is good because you can scale your website from a extra small smartphone screen to a full-size desktop screen.
So, to get started. In CSS write a containing element that looks like this:
.container-row {
padding: 0 15px;
margin: 0 -15px;
}
You want these margins and padding so the content can be fully fluid and stretch with the screen size.
Then code the following on your page:
<div class=”container-row”>
<div class=”row”>
<div class=”col-xs-? col-md-?”>
With ? being the number you want to have the column span over -up to a total of 12 (full length of screen). The first class=”col-xs-?” is meant for a ‘extra small’ (mobile) screen. The second “col-md-?” is for a mid size screen. You want these separated because it will make your code fluid with all screen types. On a very small screen you most likely won’t be able to fit a lot of content using half of the screen but on a mid to large size screen, half of the screen would be ample room for lots of content. This is bootstrap moving forward with the mobile first agenda.
Now place your content on the page, end it with a </div> and it will display in the first column you created.
Two or more columns
<div class=”container-row”>
<div class=”row”>
<div class=”col-xs-12 col-md-8″>
<div class=”col-xs-6 col-md-4″>
Let’s look at the “col-md-?” part of the code. This is referring to a mid size screen and the code “col-md-8” and “col-md-4” totals 12. Further, it would have 3/4 of the page set as the first column and the last 1/4 as a second column.
But here it get a bit tricky. The extra small screen has a 12 on the col-xs-12 and that would be considered full screen with no space for a second column. Bootstrap says to be able to stack columns on the mobile you use one full-width column and the second is half-width. For further explanation click here.
After the final column of content is added, end with </div> and you should have it made!
For further information, coding examples and as a reference, see Bootstraps Grid System page.
