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.

Comments

Post a Comment

Popular posts from this blog

AngularJS Tutorial: Creating AngularJS Hello World application using Plunker

What is AngularJS AngularJS is a front-end framework written in JavaScript and initially released in 2010. It is suitable for creating the so-called single-page application whereby you create parts for every application use case and some parts are displayed and some are not at any moment of time depending on the state of the application. AngularJS is based on declarative programming which implies describing what you would like to achieve rather than describing the algorithms of achieving the final go as in imperative programming. For example, one can use conditionals and loops to implement an algorithm, but another option is to describe a set of desired results like in SQL, where one doesn’t need to know how the server works and executes queries. In the front end realm, imperative programming is represented by jQuery a part of which is used by AngularJS under the hood. The main idea of AngularJS is it uses a thin server, which produces only data for an Angular appli
Read more

Bootstrap 3 Forms Tutorial

Image
Forms are essential for web applications, one can see them while logging in an application, editing a profile or registering for an account. Bootstrap greatly simplifies form styling by providing special style classes and providing automatic styling of form controls. To learn how to style forms and form controls we’ll discuss a registration form shown below. The code for this form as well as live demo could be seen on Bootsnipp. First things first, let’s review a basic form template. A form is placed in a .container for proper formatting. Then, in line 3 an HTML form tag is seen with a class .form-horizontal and a role form. The former is used to produce a form with labels, such as “Password” in the above image, that are on the same line as inputs, the latter is to describe meaning of the element, for example, an anchor tag can be styled to look like a button, in this case a role attribute tells that the anchor is used for playing a button’s role. After that, in line t
Read more

AngularJS Tutorial: AngularJS Controller As Syntax

Image
Introduction to AngularJS Controller As Syntax In the previous installment of this series we discussed scopes and what problems nested scopes can cause. There are a couple of solutions to this problem: the so-called Controller As syntax introduced by AngularJS 1.2 and .component() method introduced by AngularJS 1.5. The latter option is a recommended way to go if you are thinking about upgrading your application to newer Angular versions. In this post we’ll talk about AngularJS Controller As syntax. As was mentioned previously, when we instruct Angular to use a controller with the ng-controller directive, a new instance of a controller and a child scope is created. Alternatively, the same directive but with a different syntax can be used to create a controller and to attached it to a newly-created scope as the snippet below shows. The differences are that, first, in the ng-controller directive we not only pass the name of the registered controller, but also, a variabl
Read more