Introduction to Bootstrap

What are grids?

A horizontal row in Bootstrap is made up of 12 columns. So we can create sections of a row up to 12 columns total before it wraps around. In the example below we create four columns, the first is 4 columns wide, second and third are 3 columns, and the fourth is 2 columns wide.

Basic grid(s)

By default in Bootsrap there are 4 responsive breakpoints (xs, sm, md, lg, xl). The second attribute of grid class, for e.g. 'sm' in 'col-sm-4' deonotes the grid should occupy 4 columns in a viewport of that size and larger, AND if the size, in this example falls under a small then the column should stack (meaning take up the entire width of the viewport).

Having said that, we can combine as to when columns should stack. In the example below we have:

• Set the 1st grid as 'col-xl-4' meaning that the grid should occupy 4 columns in a extra large viewport, and should stack when the viewport is smaller then an extra large (i.e. take up the entire width of the viewport).
• The second grid is defined as 'col-lg-3' meaning in vieport size of large or greater it should take up 3 columns, and if the viewport falls under a large then the grid should stack (i.e. take up the entire width of the viewport)
• The 3rd grid has been defined as 'col-md-3' meaning that in viewport size of medium or larger the grid should take up 3 columns. However, if the viewport is smaller then a medium then it should stack (i.e. take up the entire width of the viewport)
• The 4th grid has been setup as 'col-sm-2' meaning that when the size of the viewport is small or larger then the grid should occup only 2 columns. However, when the size falls under a small then it should stack (i.e. take up the entire width of the display).

Same grid occupying different number of columns in different viewports

It is not necessary that a grid has to collapse. In other words it is also possible to make the same grid take up differen sizes in different viewport. To illustrate this I have modified the example above as following:

• In the 1st grid, when the viewport is extra large it will take up 33% columns, anything less it should collapse and take up 100%
• In the 2nd grid, when the viewport is extra large it should take up 25%, large should take up 50%, anything less it should collapse and take up 100%
• In the 3rd grid, when the viewport is extra large it should take up 25%, large should take up 25%, medium should take up 50%, anything less it should collapse and take up 100%
• In the 4th grid, when the viewport is extra large it should take up 18%, Large should take up 25%, medium should take up 50%, small with take 75%, anything less it should collapse and take up 100%

Moving grids to the right (offset)

It is possible to move columns to the right, in other words add gaps in between columns. Columns can be moved to the right using .col-*-offset-* class. The first asterisk can be replaced with the viewport (xs, sm, md, lg, xl) and the second asterisk with the number of columns to offset. For example, .col-md-offset-2 will offset the grid by 2 columns in viewport of medium size and larger. In the following example the 2nd grid has been offset by 2 columns in viewports of mediumd and larger.

Nesting grids

It is possible to nest a grid within a grid. To nest your content with the default grid, add a new .row and set of columns (.col-*-*) within an existing column (.col-*-*). Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 columns).