Top Lines

Designing to a 12 Column Grid

by Dave Reeder , 19 November 2015

Dave Reeder
Bootstrap is one of many CSS frameworks that uses the 12 column grid to create responsive layouts. If we design a website to fit a 12 column grid then we can use bootstrap to build responsive columns that collapse or expand depending on screen size using existing Bootstrap classes.

We use the Bootstrap framework for our web design projects.

Below is an example of Bootstrap columns that are in a row on small to large screens so that they are each 50% wide. On mobile screens they are 100% wide so they stack:

<code><div class="col-xs-12 col-sm-6">
First Content
</div>
<div class="col-xs-12 col-sm-6">
Second Content
</div></code>

Maybe we want to have three columns that are all 100% wide on mobile, with the first two 50% wide on small screens and all of them 33.3333% wide on medium to large screens.
To do this, we can just add/edit classes to our 12-col grid Bootstrap based web site:

<code><div class="col-xs-12 col-sm-6 col-md-4">
First Content
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
Second Content
</div>
<div class="col-xs-12 col-md-4">
Third Content
</div></code>

So, we know how the responsive columns will work. But it's going to be very tricky unless the site fits into this grid, so we need to make ourselves a 12 column grid template which can be done by measuring the site width at 1170px wide and adding 12 equally spaced guides and/or shaded areas that we can lay over our website to keep things within the grid:

If you want to use the 12 column grid but introduce space between things, you can add inner div tags with padding like this:

HTML:

<code><div class="col-md-8">
  <div class="inner">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pellentesque dui non rutrum mollis. Nunc ut nulla vel velit pellentesque pharetra at sit amet risus. Etiam bibendum, orci in porttitor efficitur, eros sapien elementum magna, non placerat mi odio non dui.</p>
  </div>
</div>
<div class="col-md-4">
<p>Quisque maximus ultricies enim, ac pulvinar lectus ornare nec. Nam efficitur purus at tortor viverra, ut ultricies arcu mattis.</p>
</div></code>

CSS:

<code>.inner {padding-right: 5%}</code>

Join the Discussion...


Back to Blog

Get Important News & Offers

Enter your email to receive monthly news and special offers from Made Simple Media:

You can unsubscribe at any time, please read our privacy policy for more information.

Ask a Question...

Please complete the form below to send us a message:

Call now on 0800 111 4504

Stay Informed...

Enter your email address to receive occassional emails with special offers, relevant news and useful tips:

Please note, we never share your data with any third party and you can unsubscribe from emails at any time and request that your data is deleted.