m

Bootstrap is a front-end framework that provides components, classes and sets of css for faster and easier web development.

In August 2013 Bootstrap 3 was released and one of its new features was its grid system that allows you to make fast and easy layouts using some predefined classes.

This post is an introduction to Bootstrap grid system explaining its classes and how to use them.

row and col-* classes

The row class is used to create an horizontal group of columns. Inside this row div we place the columns. Every row in the grid is made up of 12 units, we group these units in column classes as desired.

It is easier to understand with examples.

Let’s start adding some paragraphs under a row class without defining any columns. See below the code.

I have highlightened some important lines. In line 7 we import the Bootstrap css file. In line 17 we wrap our components within a .container. Quoting Bootstrap documentation “rows must be placed within a .container for proper alignment and padding”. And in line 21 we define our row class. I have defined some style for the .row, a background color and a border, so it is easy to visualize.

As a result this is the web page that is displayed by the browser:

no columns

Let’s create 4 columns now in our layout:

We have defined 4 same size columns, 3 units each, resulting in a total of 12 units (3+3+3+3), the row size.

no columns

We can have different sizes for columns within the same row:

no columns

Grid sizes: col-xs-*, col-sm-*, col-md-*, col-lg-*

Bootstrap defines different classes based on the screen width, so we can specify different layouts depending on the device type we are using to visualize our web page.

These classes are defined based on Bootstrap media queries that create the following breakpoints:

Device
Screen width
Class prefix
Extra small devices (Phones)< 768 px.col-xs-
Small devices (Tablets)>= 768 px.col-sm-
Medium devices (Laptops)>= 992 px.col-md-
Large devices (Big monitors)>= 1200 px.col-lg-

The .col-* classes are only applied if the screen width is greater than or equal to the breakpoint size. Imaging you define two columns as .col-md-6 and .col-md-6, in a laptop (screen width > 992px) you will see those 2 columns while in a mobile phone you will see only 1 column since the classes are not applied for screen width lower than those 992 px.

Let’s see an example.

This is what you see in medium and large screens. It is applying .col-md.3.

no columns

In small screens like tablets .col-sm.6 is applied.

no columns

And finally in a mobile phone, none of the .col-* classes are applied, displaying by default 1 column.

no columns

Nesting columns

You can nest rows within existing columns.

no columns

Offset

You can specify an offset for a column using col-md-offset-N. With N you specify the number of units you want the column to be moved. This is commonly used for centering columns.

no columns

Space between columns

By default the space between columns, called gutter, is 30 px, a padding of 15px on each side of a column.

We can change this width defining a value for the padding property for the .col-* components. But we don’t want to have this gap on the first and last column, so we adjust this gap with the margin property of the .row element.

This is the default value defined by Bootstrap. If you don’t specify any other values these are the ones that are applied.

no columns

If we triple that value:

no columns

Notice that the left margin for the first column and the right margin for the last column has been increased as well. To adjust this we need to specify a negative value to the margin property for the .row:

no columns

I know it is quite hard to understand the css but I found a very good article explainig it by Erik Flowers, so let me just put the link here.

I will continue writing about Bootstrap 3 in my future articles. Next thing I would like to write about is the customization of buttons. So stay tuned if you are interested.

2 comments

  1. January 24, 2014 at 12:59 am Erik

    Thanks for the link. I am glad to see more people writing about BS3 and how awesome it is.

  2. January 24, 2014 at 4:45 pm Jorge

    Very useful. Thank you very much!

Leave a reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">