Bootstrap Grid Tutorial

Titter Bootstrap Grid Tutorial

This a comprehensive Bootstrap grid tutorial, and is the first tutorial in a series that will cover developing a website with Bootstrap. As Bootstrap provides an easy way to get your web project off to a flying start. It should be pointed out that if you are looking for Javascript plugins or a CSS reset then Bootstrap is certain overkill – and then some! The beauty of Bootstrap is that if you don’t want or plainly just dislike some of the default interface elements, you can easily strip them out or overwrite them. Bootstrap shines in it’s ease of use in prototyping fast responsive websites.

Please check out the Bootstrap 3 Grid Tutorial for a mobile first approach!

Bootstrap was created by Mark Otto and Jacob Thornton, both were employees at Twitter and at the time there was a need to standardise thefront-end toolsets of engineers across the company. The inconsistencies in toolsets used in applications made it difficult to scale and maintain code. Bootstrap began as an answer to those challenges.

Originally it was entirely CSS-driven and then grew to include Javascript plugins and icons, forms and buttons. It CSS allows for responsive design on a 940px, 12 column grid. You can customise the download of Bootstrap to suit your needs from the Bootstrap’s Github repository, which gives you the components you need on a stable foundation. The most basic element in Bootstrap the boostrap.css file. In a basic set up there are three root folders for CSS, Javascipt and Images.

The basic html file set up is:

The default grid-system is 940px in width with 12 columns, this is without the responsive features enabled. By adding the responsive file the grid adapts to 1170px or 724px depending on your viewport. Viewports below 767px such as tablets and smartphones the column become fluid and stack upon one another vertically.

The default width for each column is 60px with an offset of 20px to the left.

Twitter Bootstrap Grid System

A page layout is created by the use of a horizontal container <div> that given the class of  ”.row” which interact with the vertical columns to form a grid pattern. Row’s are given a predefined width by use of a <div> given the class “span(number)”, the number defines the span’s width. The width of one or more spans must add to twelve.

Offsetting

You can move columns to the right by using the “offset(number)” class. For example a span with an .offset3 would move the span to it’s right to move three spans over creating a space of three spans (60px + 20px x 3) see example:

NOTE:Remember to place your .offset in the ‘div’ that is to be offset.

Nesting Columns

To nest div’s you simply place a ‘.row’ inside a ‘span(number)’. This new ’.row’ must have the same number of span(number) as it’s parent container! As you can see below the parent container is ‘.span9′ so the nested .row’s spans must add up to nine:

The Fluid Grid

The fluid grid uses percentages as apposed to pixels to define column widths. It has the very same responsiveness and the fixed grid giving you the proper layout proportions for the varying screen resolutions of different devices. To make any ‘.row’ fluid simply change ‘.row’ to ‘.row-fluid’, note that the column classes remain untouched which make it easy to change between fixed and fluid and ‘.offset(number)’ works!

Nesting in a fluid grid is a little different than in a fixed grid because we are now using percentages. So for example if you wanted to nest two ‘divs’ inside a ‘.span8′ you would use two ‘.span6′ div’s, because ‘.span6′ is half of 12. Whereas in the fixed grid you would use two ‘.span4′ divs. So in fix grids think of fractions of the ‘.row’, in fluid grids think of percentages in ’.row-fluid’.

Layout Containers

Adding a fixed-width layout container to you page is a simple as placing your content in a
‘<div class=”container”>’,
or if you prefer a fluid layout wrap your content in a
‘<div class=”container-fluid”>’.
To activate responsive Bootstrap features you must first add a tag and the link to the responsive.css file in the head of your page. Below is a very quick and basic fluid template.

Note: The responsive CSS link and meta tag are not default you must add them!

You can read more on the benefits of responsive design here Bootstrap supports five different layouts which rely on CSS media queries. The largest layout has columns which are 70px wide, whereas the fixed grid is 60px wide. On the tablet layout column are 42px in width. When the with of the viewport narrows below 767px all columns turn fluid!Meaning , they stack vertically and acquire the width of the viewport.

Adding custom CSS based on media queries is easy, you can even use a new CSS file

You can call media queries for different sizes of viewports in different CSS files. This may be beneficial for loading times, although it does make more HTTP requests! If anyone knows which is best please comment. ( if you are using LESS the CSS is compiled in one file).

To load different style sheets for different devices use the following mark-up in the head:

Helpers

Bootstrap has helper classes for responsive design such as ‘.visible-phone’, so you can make some element visible on a mobile device which would be hidden on a tablet or laptop. Other than menus I don’t use helpers, for me they just complicate things needlessly – though they are there if I need them.

Conclusion

By learning the Bootstrap grid system you will be able to rapidly develop website templates with the benefit of making your design accessible across multiple devices. Bootstrap is a proven and stable foundation to work on.
Understanding the difference between fluid(percentages) and fixed(pixels) is key. Nesting and offsetting on both grids gives you more control. Its important, I think to have a fundamental understanding of how the grid system works, particularly with regard to media queries in order to use Bootstrap effectively and get the best out of it. This concludes the Bootstrap Grid tutorial, next we’ll be looking at Bootstrap features from typography to contact forms!

Comments

Trackbacks

Leave a Reply