Tag Archives: 12 grid system

Columns

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

To set up more than one column, designate the first column as less than 12 and use the remaining amount (up to 12) as the second column for each size of screen.  Here’s the example:

<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.