Bootstrap 3 Grid Tutorial

This is a tutorial on the new Bootstrap 3 grid system! This latest version of Bootstrap has some interesting new components and the grid is just one of them -  and the best place to start. In the demo I have included the page elements to give you an understanding of Bootstrap 3′s default styles. To get familiar with the new system, we’ll first take a look at the key on the grid map below, notice how different devices scale a little differently; particularly in the smallest (xs) grouping for phones.

Bootstrap 3 responsive grid

Bootstrap 3 Grid System Fig .1

As you can see the new grid is very straight forward. The grid now takes a mobile-first approach, meaning that you design for smaller devices first and then scale for larger devices. This is far more efficient for mobile users. It is very much a holistic approach to design, in that elements, such as headings and forms should also be coded and designed from the smallest screen upwards. So that everything scales uniformly.

The New Bootstrap Grid is based on four new column size classes, starting with the smallest sized devices:

  1. .col-xs-#(number-of-columns): Phone
  2. .col-sm-#(number-of-columns): Tablet
  3. .col-md-#(number-of-columns): Laptop/Desktop
  4. .col-lg-#(number-of-columns): Large Desktop

Follow this link for an example of each class and to discover how they operate at differ sizes, simply re-size your browser. But first things first, in the head of your HTML document make sure to add the <!DOCTYPE html> so that browser understand your website uses HTML5, and always remember to add the viewport meta tag:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>. This tells browsers that your webpage is responsive!

Next, add your stylesheet, <Link rel=”stylesheet” type=”text/css” href=”path/to/your/css/bootstrap.css” />. Since we and just dealing with the grid itself, the bootstrap javascript is optional!

Below is an example of a basic bootstrap page set up. For the examples that follow in this tutorial simply copy and paste into this basic markup in your text editor.

Before looking at each class individually you should note the basic structure of the Bootstrap grid system. The example below renders a full-width container, because it is twelve columns in width. Each ‘.row’ should add up to twelve columns.

Below we have two ‘.col-*-6′ columns, 6 + 6 = 12. To have three columns in a ‘.row’, simply give each ‘.col-*-4′ class tag, as 4 + 4 + 4 = 12. As long as the columns in any given ‘.row’, add up to twelve – you’re golden!

If your still not sure then scroll back up and look at the grid layout above (fig. 1) to see and understand.

Copy each class in to your text editor, or a mix different classes and sizes together to see how they behave!

Example of All Classes

Extra Small Class

The Extra Small class will render / scale the same in all devices!

Small Class

The Small class will break it’s grid structure to form a single column on smartphones!

Medium Class

The Medium class will break it’s grid structure to form a single column on tablets and smartphones!

Large Class

The Large class will break it’s grid structure to form a single column on small desktops / laptops, tablets and smartphones!

So, No, you don’t have to list every device when make a new column!

The new grid system is controlled by the viewport size via media queries! So it is based on breakpoints more so than on the elastic grids of earlier versions of Bootstrap. With the aid of media queries, as the browser width gets wider, the different column classes will overwrite each other!

NOTE: AS YOUR BROWSER WIDENS THE SMALLER SIZED CLASSES BE OVERWRITTEN, &, AS YOUR BROWSER CONTRACTS THE LARGER CLASSES BE OVERWRITTEN!

Grid Logic – Basic

 

Examples of Bootstrap 3 Grid's CSS classesSee Sample of Different Grid Classes Here!

To use the new Bootstrap 3 grid effectively you are going to have to decide at which break-point you are going to break your single stack so that the columns will spread to form a row to be viewed by larger screens. It is important to remember that all columns are assumed to have a 100% width, and to be stacked vertically!

Lets say you have three columns in a row when viewing on your desktop. They are images, and if you were to display them constantly side by side at the same ratio they loose their impact and detail when viewed on smaller devices.

Here are the three columns, look at the Grid Map above:

See this example of the three columns If you want them placed side by side always use the Extra Small class “col-xs-#number-of-columns” If you want them stacked upon one another on phone and then placed side by side for tablets and upwards then use Small class “col-sm-#number-of-columns”. And to display in a single stack for smaller devices and then display side by side at laptops and upwards use the Medium Class “col-md-#number-of-columns.” So, what classes will you need to give your columns? The code below, will display as a 100% wide single stack on all phones and tablets. The three columns will only display aside by side on laptops, desktops and large desktops.

See this this example of the three columns.

Now, if I wanted these columns (divs) to display side by side on a desktop I would add the class “col-md-4″ to each <div>. So that the the columns will display as a row of three in devices on medium and larger screens and will stack on top of each other on smaller screens.

Basically, “col-md-4″ translates as “on a medium sized device and on larger devices, make me four columns the width of the screen.” If for example if you wanted to display the three column horizontally even on the smallest screens, you simply add the class “col-xs-6″. The map of the grid system above is a good reference. This will maintain a three grid horizontal layout regardless of the users device. Easy right!

Grid Logic – Mixing

Suppose you have two pictures that you like to display side by side on medium screens.

However, suppose the first image is really much better than the second and you would very much like to do the first picture justice, by making it display bigger on large desktops. You can do this by giving both columns an class for larger(lg) screens! To make the first picture bigger on larger devices by adding extra classes to the columns above! Like so:

See example here.

Mixing is best learned by trial and error here is an example of mixing classes, download the files at the end of the tutorial and play around with different mixes of class.

You can download Bootstrap 3 here! – have fun!

In the next tutorial we will be looking at mixins! A grid of your very own. Until the next bootstrap grid tutorial, so long!

Comments

  1. says

    Very nice follow up tut from your 2.0 version.

    One more little bug though in the code just above this statement:
    “Basically, “.col-md-4″ translates as “on a medium sized device and on larger devices,…….”

    You need to delete the dot in front of the class names when they are actually inside the class attribute.

    class=”.col-md-4″ should say class=”col-md-4″

Trackbacks

Leave a Reply