Introduction to Bootstrap 4 Grid System

Bootstrap 4 has a powerful grid system which is mobile-first and built with flexbox. Being mobile-first is a buzz word these days and one of the reasons of Bootstrap’s huge popularity across.

As more and more people are adapting to the smart phones and tablets for accessing the web. Also, searches on main search engines like Google, Bing has surpassed desktop/laptops – so it became necessary for transferring to the responsive web.

So, either you are developing a new website or have existing – building responsive websites that adapt to any device is very important. To add this, Google is moving its index to mobile-first (main announcement) index.

How does Bootstrap Grid System work?

The web page is divided up to 12 columns in Bootstrap grid system. If you require less columns, you may use the wider columns by using grid .col-*-* classes for grouping. However, you cannot exceed the twelve columns layout.

Have a look at few examples of pre-defined .col and .row classes and I will explain how it works.

Three equal width columns in large and extra large devices only:

See online demo and code

The markup:

If you run this example in devices with screen greater than or equal to 992px then it will display equal sized three columns. For less than 992px (medium, small or extra small), it will stack as shown below:

Three equal columns in Small, Medium, Large and Extra Large devices

Use the col-sm class for equal sized columns in screens greater than or equal to 576px. Have a look at this example and resize the screen to see how it displays in various sizes.

See online demo and code

The code:

You can see, only in extra small devices, the columns changed its position stacked like the above graphic.

Now, let us have a look at the available grid classes in Bootstrap 4:

• col-xl-* (for devices with screen greater than or equal to 1200px)
• col-lg-* (For devices with the screen greater than or equal to 992px)
• col-md-* (Medium devices; screens greater or equal to 768px)
• col-sm-* (Small devices; >= 576px)
• col-* (for extra small devices < 576px)

For above examples, you may conclude that if you want to display equal sized columns in medium, large and extra devices then you should use col-md-* class.

If your require displaying equal sized columns on all devices including extra small and small then use the col-* class.

The Example of different sized columns

If you have content to display in different widths then you may organize this by using numbers in column grid classes that should equal to 12. For example, create seven column width by col-sm-7 and five column width by col-sm-5 that is for small devices and scales automatically for extra large devices. Have a look at this example:

See online demo and code

The markup:

Exploring the code – how grid system works?

As we have a seen a few examples of using the grid system, now let me go through the code and explain why .container, .row and cols classes are used and the rules to follow as working with Bootstrap 4 framework.

• You may use .container class for padding the content of site centrally and horizontally. The container is for responsive pixel width where you may place rows. You may also use the container-fluid class. The container-fluid is for full width (100%) across devices and viewports.
• In the example code, you can see the first <div> after the container is .row. The row acts as the wrapper for columns. You should use rows for creating the horizontal group of columns. For example, if you want to display three separate cards with the same width and horizontal line, you may use .row wrapper and use .cols inside it with cards content. See an example here.
• As a Bootstrap rule, the content should be placed in columns. For example, the markup for cards, carousel, forms should be placed in columns.
• The columns can be the immediate children of rows.
• You may use columns with numbers e.g. col-sm-4, col-sm-8 (sum up to 12) or simply use col-sm, col-lg, col-lg etc. In that case, due to the flexbox, the columns layout will be equally distributed.
• The Bootstrap has five grid breakpoints for being responsive. One for each responsive breakpoint i.e. extra large, large, medium, small and extra small.
• The width of the columns is set in percentages. That is why they are sized in relation to their parent element and are always fluid.
• The gap between the column content is called gutter. This is done by using padding. You may remove the gutter by using .no-gutters in the .row. The gutter width is 30px; 15px on each side of the column.

An example of equal width in all devices

By using the .col or .col-*, you will make Bootstrap handle the layout automatically on all devices. Basically, you will use these classes when you want to maintain equal widths in columns from extra small to extra large devices.

See this example and resize from extra large to large, medium, small and extra small and see how it maintains three columns unlike the above examples where columns became stacked in extra small devices:

See online demo and code

The code:

You can see, Bootstrap allocated equal widths to all columns automatically and that maintained in all devices including smartphones.

Equal columns in multiple lines example

By using a single .row, you may break the columns into multiple lines by using width utility classes. For example:

See online demo and code

The HTML:

This example also applies to all devices/viewports as we used .col classes for equal widths of columns.

The example of unequal width columns in all devices

Practically, you will need un-equal width columns in the web pages. For example, left navigation may require less space than the content in the middle of the page. Similarly, a third column may require more space for right navigation and a small column for subscription form etc.

See the following example where four columns are used with the following grid classes:

• .col-1
• .col-4
• .col-3
• .col-4

So these became total 12. Please note that you do not necessarily require using all the twelve columns. Have a look at the output of this:

See online demo and code

The markup:

Again, I used .col-* classes, so this applies to all devices i.e. extra small to extra large.

Setting one column number example

You may also choose to set the column width for one column and leave the other to adjust by Bootstrap automatically. This example uses the .col-md classes for setting the layout.

So, the columns appear horizontal in medium devices (from >= 768px) and stacked below this (small and extra small devices):

See online demo and code

The code:

You can see in the output, the first column is given . col-md-2 (explicitly) and the last column . col-md-3. The remaining seven columns allocated to the middle column where we did not provide any number i.e. col-md.

As I used .col-md-* classes, the columns should display horizontally in medium, large and extra large devices. In small devices (less than 768px) like tablets, smart phones, it should appear stacked.

Mixing multiple grid classes

Let me extend the above example for explaining how you may mix up the multiple grid classes for the single column. As you saw in above example, the columns stacked in small and extra small devices while horizontal on medium, large and extra large devices.

What if we require displaying the same for medium, large and extra large as in above example while for the small and extra small devices we require displaying all three columns equal in width rather than stacking?

For that, you may use multiple grid classes; one for medium to extra large and other for small and extra small devices. I simply added the .col class in all divs along with .col-md* classes and now look at the smaller devices by visiting this example:

See online demo and code

The code:

The example of nested columns

You may add rows and columns inside another column i.e. nested columns. For example, the main div with .row containing two columns with .col-6 grid classes.

In the first <div> with .col-6 class, you may create another <div> with .row and inside it two div(s) with .col-3 classes as shown below:

See online demo and code

The markup:

You can see the first column is nested further by col-8 and col-4 classes in two div elements.

Organizing this for some real layout

On the basis of above knowledge of using rows and columns of grid classes now let us move ahead for creating some real layout with different Bootstrap 4 components like buttons, links, Jumbotron, cards etc.

I will go row by row for adding different components and you can see the live demo for various components added.

Let me begin by utilizing a complete row with a Jumbotron component in the first row. The main div is assigned the .container class. This is followed by using a .row and then another <div> element with .col-12 class – so this section takes full available width. Have a look at the code and output:

See online demo and code

The markup:

Adding three card components

By using col-sm-4 grid class, three cards are added after the Jumbotron. A new row is created in a <div> element which is followed by the markup for cards as follows:

See online demo and code

See the markup and output until now on the example page.

Also note that, as I used col-sm-4 grid class, so from small to extra large devices, it will display the cards horizontally. In extra small viewports, it will stack.