Designing to a 12 column grid

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:

12 Col 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>

Who are we?

We are a digital agency specialising in Web Design, Development, Concrete5 and digital marketing, based in London & West Sussex.

We make digital simple. Our purpose is to simplify your frustrations in digital and solve the challenges you face to help make you more money and progressively grow your business or organisation.

Tell me more

Keep up to date

June special offer...

FREE hosting in year one

We'll give you FREE hosting when you buy a website from us. The hosting includes full 24x7 UK support, FREE SSL cert, FREE domain, daily backups and is optimised for high levels of speed and security. Worth up to £480 a year!

Tell me more
Call us