The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.

Demo

Try the button below to see what the page looks like without containers.

Turn off Containers

The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.

Take a look at this section to quickly understand how the grid works!

Our standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.

To get a feel of how the grid is used in HTML. Take a look at this code below which will produce a similar result as the one above.

Note: For now, just know that the s1 stands for small-1 which in plain English means "1 column on small screens".

The container class is not strictly part of the grid but is important in laying out content. It allows you to center your page content. The container class is set to ~70% of the window width. It helps you center and contain your page content. We use the container to contain our body content.

Remember when you are creating your layout that all columns must be contained inside a row and that you must add the col class to your inner divs to make them into columns

To offset, simply add offset-s2 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.

You can easily change the order of your columns with push and pull. Simply add push-s2 or pull-s2 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to push or pull by.

Here we will show you how to create some commonly used layouts with our grid system. Hopefully these will get you more comfortable with laying out elements. To keep these demos simple, the ones here will not be responsive.

If we want 3 divs that are equal size, we define the divs with a width of 4-columns, 4+4+4 = 12, which nicely adds up to 12. Inside those divs, we can put our content. Take our front page content for example. We've modified it slightly for the sake of this example.

You can see how easy it is to create layouts using the grid system. Just remember to make sure your column numbers add up to 12 for a even layout

In the previous examples, we only defined the size for small screens using "col s12". This is fine if we want a fixed layout since the rules propogate upwards. By just saying s12, we are essentially saying "col s12 m12 l12". But by explicitly defining the size we can make our website more responsive.

In this example below, we take the same layout from above, but we make it responsive by defining how many columns the div should take up on each screen size. Try resizing your browser and watch the layout change below.