Why use Bootstrap v3 and not Bootstrap v2

Posted by on in Blog

Bootstrap is the front-end awesomeness that we use in all of our Joostrap templates, which is basically just a bunch of very cool CSS and JavaScript files that helps make your website work on all mobile devices.

So why are we favouring Bootstrap v3 to the old Bootstrap v2 on all of our new templates?

Bootstrap v3 introduced a new “flat” design, which serves two important functional purposes. The new version strips away some of the aesthetic flourishes which makes it easier to customise for your own & clients websites. Secondly, it dramatically improves the 'repaint' time, basically meaning how long it takes the browser to “draw” all the elements on a webpage.

The above points are important and I really expected nothing less from the Bootstrap community.

But there is also a third point and one that I consider to be the best thing to come out of version 3.

The New Grid System

Bootstrap now includes a superb responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes new predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Bootstrap's Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

Rows must be placed within a .container for proper alignment and padding.
You can use rows to create horizontal groups of columns.
Content should be placed within these columns, and only columns may be immediate children of rows.
Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
Columns create gutters (gaps between each column of content) via padding. This padding is offset in rows for the first and last column via negative margins on .rows.
The Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4 and this would equal 4 + 4 + 4 = 12 easy!

But the most awesome thing about Bootstrap v3 is that we can mix things up a bit and have different column layout's at different device viewpoints - this is and was not available in Bootstrap v2.

So what can we do?

Let's say we have a site showing 3 columns and 2 rows on a page at our desktop viewpoint as follows:

<div class="row">
  <div class="col-md-4">
    some content...
  </div>
  <div class="col-md-4">
    some content...
  </div>
  <div class="col-md-4">
    some content...
  </div>
  <div class="col-md-4">
    some content...
  </div>
  <div class="col-md-4">
    some content...
  </div>
  <div class="col-md-4">
    some content...
  </div>
</div>

Thats pretty cool - but as soon as we go go below a certain viewpoint, our 3 column layout will quickly be converted into 1 single column.

So, let's use Bootstrap to change the above content into 2 columns and 3 rows on a mobile device as below:

<div class="row">
  <div class="col-xs-6 col-md-4">
    some content...
  </div>
  <div class="col-xs-6 col-md-4">
    some content...
  </div>
  <div class="col-xs-6 col-md-4">
    some content...
  </div>
  <div class="col-xs-6 col-md-4">
    some content...
  </div>
  <div class="col-xs-6 col-md-4">
    some content...
  </div>
  <div class="col-xs-6 col-md-4">
    some content...
  </div>
</div>

All we have done above is add an extra CSS class to our div's - col-xs-6

What adding this extra class does is at the smaller 'xs' viewpoint, we ignore the 'md' class and turn our content into 6 + 6 columns and 3 rows.

How cool is that! for me, the most awesome thing to come out of Bootstrap v3.

Further reading on the new Grid layout columns can be found at the Bootstrap v3 website, explaining the use of the follows classes:

.col-xs- When two or more of these columns are in the same row, they will always remain side-by-side, even on the smallest mobile screens. Most of the time you’ll want your columns to stack on mobile devices, so use this only when you have a very specific reason to maintain columns on mobile devices. These are also the only column type that cannot be nested.
.col-sm- These columns are collapsed to start, but become horizontal at widths of 768px and above.
.col-md- These columns are collapsed to start, but become horizontal at widths of 992px and above. These are a good default to use for just about every column. Once you have your rough layout, you can start to tweak things with some of the other column types.
.col-lg- Again, collapsed to start, but horizontal at 1200px and above. This is useful if you have an element that normally stretches the full width of the page, but might look ridiculous across a 27″ iMac screen.

We are now given the opportunity to do the 'mobile first' thing and rather than have 1 single column of content at smaller viewpoints, we can now mix things up and have a combination of columns on different viewpoints.

Use and abuse them... they are great & will totally give you the means to layout your website in the 'mobile first' way you've always wanted.

Last modified on
blog comments powered by Disqus

Supporting Partners

stackideas
sobipro
k2
akeebabackup
jomsocial
jce editor

 

Our Preferred Joomla Host's

Web Hosting

Get in Touch With us

For account or Joostrap enquiries, please get in touch with us here.

Contact us