Learning jQuery

How the Bootstrap 4 Grid Works

Normally we love talking about jQuery here, but today we’re going to dive right into Boostrap! The Bootstrap grid is quite magical, and as we love working with it, we thought we should share some insights on how the Bootstrap 4 Grid actually works.It is very different from what we call a Grid in Jquery, so don’t get them confused. 

The main questions we will be covering in this article are:

1. How do the different grid sizes work?

2. Why does Bootstrap have 12 units (columns) for its grid?

3. Can I use more than 12 columns in a row?

4. Why do rows have a negative margin?

The Bootstrap Grid System is mainly used for responsive design, specifically for Responsive Layouts. Seeing how it functions under the hood is imperative to understanding Bootstrap. The Grid consists of groupings of Rows and Columns inside at least 1 Container. The most basic example is:

<div class="container">

  <div class="row">

     <div class="col">This is using the bootstrap Grid!</div>

  </div>

</div>

The great thing about Bootstrap Grid is that it can be used alone, without the Bootstrap JavaScript and different CSS Components. You simply need to download and reference "bootstrap-grid.css" in your html file. This "bootstrap-grid.css" file contains the Grid and Flexbox classes. Of course, more information on Bootstrap Grid CSS is here in the docs. 

You can also include Bootstrap grid using precompiled files like this:

bootstrap/

??? css/

?   ??? bootstrap-grid.css

?   ??? bootstrap-grid.css.map

?   ??? bootstrap-grid.min.css

?   ??? bootstrap-grid.min.css.map

Bootstrap's grid system is responsive, and the columns will rearrange themselves based on the screen size of the device: 

You’ve definitely seen the case where on a big screen like a Desktop the content might look better organized in three columns, but on a small screen like an Iphone it would be better if the elements were stacked on top of each other. This is typically the work of Bootstrap Grid or something similar. 

Here's another basic case of the Bootstrap Grid, creating two columns inside a row:

<div class="container">

  <div class="row">

    <div class="col-sm">

      One of two columns

    </div>

    <div class="col-sm">

Another column out of two

    </div>

  </div>

</div>

For example, our website uses two columns, which if we were to redesign in Bootstrap, we could use Bootstrap 4 Grids to accomplish. 

Okay, so now that we see an example of what it looks like, let’s get into the nitty gritty of how it works.

• Containers give us a way to evenly pad your site’s contents and allow everything to be spaced out horizontally and vertically. 

• Rows are the wrappers for columns. Every column has horizontal padding which is used to control the spacing between the columns. This allows everything to be aligned. 

• You can use predefined grid classes (like .col-sm above) which size the columns (more about this later, when we explain breakpoints)

The Bootstrap Grid system works due to using the magical flexbox- it is built with flexbox and that’s what allows Bootstrap Grid to be fully responsive. 

Actually, the biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 Grids now use flexbox, as opposed to floats, to handle the way the elements layout.

Flexbox, also known as The Flexible Box Layout Module, makes it easier and much faster to design flexible responsive layout structures without the use of float or positioning. If you are interested in learning more about Flexbox, you can read about it in this great CSS Flexbox Tutorial.

Thanks to flexbox, grid columns which don’t specify width automatically end up as equal width columns. For example, three columns of .col-sm will each automatically be 33% wide from the small breakpoint and up. This would look like this:

<div class="container">

  <div class="row">

    <div class="col-sm">

Column 1

    </div>

    <div class="col-sm">

Column 2

    </div>

    <div class="col-sm">

Column 3

    </div>

  </div>

</div>

The column classes are used to indicate the number of columns out of 12. So, if you’re trying to create three equal columns, you can use .col-4 (since 12/3 = 4)

Each column has horizontal padding to create the space between columns. To make the grid responsive and look beautiful on all devices, there are 5 grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large. Column width is set in percentages (%), so that they can always be fluid and sized relative to their parent. This is also due to the magic of the flexbox. 

First, let’s address the most common question: Why does Bootstrap have 12 units (columns) for its grid?

Why did we choose 12 columns? Well, 12 column grids is just a  convention and it is just that, it's not a standard.

Twelve is a great number because 12 can be divided by 1, 2, 3, 4, 6 and 12. So it is very flexible and is a great choice for columns. 

Ok, but can I use more than 12 columns in a row?

Sadly, no, you should never have more than 12 columns in a row. However, the documentation states that if there are more than 12 columns in a row, then the extra columns will wrap onto a new line. Bootstrap was created to be used with 12 columns max. 

If you want to have more than 12 columns, you need to define your own custom responsive grid, which is a little more complicated. You can accomplish this with the help of Bootstrap Less variables (see here). 

Ok, that’s all great and all, but how do the different grid sizes work?

Well, moving on from the concept of column width, Bootstrap has different grid sizes, that are called “breakpoints”. The Bootstrap 4 grid comes in 4 sizes for different screen widths. Each grid size has a range that is designed to best-fit typical device screen widths. These are specified using  class prefixes that start with .col.

 The class prefixes are:

Now, you have learned everything you need to implement Bootstrap 4’s Grid to make your own beautiful applications. If you’d like to check out more on how to make responsive apps, we have a great article on JQuery plugins to make mobile responsive websites.