Understanding Bootstrap 3 Grids

In a previous post Twitter Bootstrap essentials were discussed. Today we'll survey an important part of the framework called grid.

Bootstrap grid is a structure which allows one to create page layouts. Grids can contain up to 12 columns in each row, if you place more than that, additional columns will be wrapped onto the next line. Moreover, each column can have a width of more than one, but the sum should be equal to 12 as is shown on the image below.
For example, you could have 12 columns of width 1 or 6 columns of width 2 or 2 columns of width 6 or even 3 columns of widths 3, 6 and 3. It is important that the sum should be equal to 12.

A snippet of code showing a basic grid structure is shown below.
The grid, as well as all site content, should be wrapped in a div with a .container or .container-fluid class. Then everything that is to be placed into a grid should be divided into rows an the content of rows should be subdivided into columns. The only possible children of divs with .row class are columns. It is worth noting how the comments to mark the end of a block are used in the Bootstrap examples section and in the snippet above. When your blocks grow large, it will be easier to find the end of a block and easier to read the code as a result.

What the magic asterisks are in the snippet? They are placeholders. The second asterisk in the construct col-*-* stands in for numbers from 1 to 12 and denotes the number of columns. Another asterisk has something to do with the width of the screen of a device. Roughly devices can be subdivided into four categories: phones, tablets, laptops and desktop. Bootstrap assigns the maximum screen width for each category. If the width of a screen is less than 768px it is treated as an extra-small device or phone and xs is used instead of a placeholder. If the width is greater than 768px it is a small device or tablet and sm should be used. Then if width is greater than 992px it's a medium device and md is used and for large devices or desktops with with to the north of 1200px lg is used instead of the first asterisk.

How are those col-*-* used? The snippet below shows a simple Bootstrap grid example.
A several classes for a single column could be used but in a particular order: from left to right the smallest first and the sequentially the others in the order of growing maximum screen width. If the xs class is omitted, the full width is a default, that is all column divs are stacked one above another. If you use only the sm class then for extra-small devices there would be only one column of full width, and the prescribed number of columns for small, medium and large, the same for all the latter. The interesting part is that the subdivision into classes is based on “greater than” which means that using a class for smaller device determines the behavior for lager devices if otherwise is not specified.

If you would like to redefine the behavior for extra small devices, you should explicitly specify the number of xs columns. In a nutshell, it is possible to define disparate number of columns for each particular type of a device, but if you intend to use the same number of columns for several device types, you should include the class for the smallest one. For example, if you add only a md class, it will define the number of columns for medium and large devices. To change the number of columns for large devices, lg class should be added.

The example uses Glyphicons which are included in Bootstrap. To embed them into a page one should use an i or a span tag with an obligatory .glyphicon class followed by the name of a particular icon. The third class, .green, is defined in a separate css-file to paint an icon in green. As one can see from the snippet auto wrapping is used when the total “width” of columns is greater than 12. The example renders 2 columns for extra-small and small devices and 4 columns for medium and large devices.

To see all this in practice your could click this link and preview in on Bootsnip. To simulate a smaller device your could decrease the width of your browser's window or use some useful browser extensions which allow one to resize a window to “emulate” a device in a single mouse click. If you use Google Chrome you could opt for Responsive Web Design Tester and in the case of Mozilla Firefox Firesizer add-on may suit your needs.

Also, columns can be nested, which means that a new div with a .row class can be placed into a div with col-*-* class. The same arithmetic with 12 columns applies to nested columns. The snippet below shows the nesting of columns.

As with the examples above and below a demo can be previewed at Bootsnip. In the demo a wrinkle can be seen that is the height of an embedded column is larger than the one of the others. To mend it a clearfix is added in line 14 of a snippet below.

In addition one can conceive of a situation when it is necessary to center some content horizontally. Bootstrap 3 grid make it possible by a special .col-md-offset-* class, where an asterisk is a placehoder for a number which is a value of the offset in terms of columns. The snippet below shows how to use the offset to center a block.

Bootstrap 3 grids is a powerful means of the page layout. Some examples are given here. A blog example demonstrates grid usage in practice.


Popular posts from this blog

Getting started with Dropwizard: Connecting to a Database using Hibernate

Getting Started with Dropwizard: Authentication, Configuration and HTTPS

Getting started with Dropwizard: First steps