Bootstrap 4 Grid System

If we talk about any responsive websites, Then the grid system is one of the compulsory components. If you can see any kind of responsive website which mad in bootstrap, there you will see the grid system in the coding. So, In this article of bootstrap 4, I will let you know the grid system of bootstrap version 4.

Basically, The grid system is common in all the versions of Bootstrap. all the versions have the same grid system. If you are going to use a grid system then you have to use this in the nested of row. The grid system is nested of row class. In the bootstrap grid system allows you up to 12 columns across the page. You can use the grid as per your requirement but the total of grids is must be 12. We will know in the deep this concept. But first, we should know-how is the grid system works.

Here, This is compulsory to know how the grid system works? and how this is flexible with all the screen sizes?

How works the Bootstrap Grid system.


The grid system is the bundle of classes. There are 12 columns and a 1-row total bundle of 13 classes. There is no limitation for the use of columns. But you have to mind one thing, The thing is the total of your grids must be 12. This is the biggest reason for the system is flexible with all the screen sizes. This grid system supports a max value of 12 columns. Anything after the 12th column will be shifted to a new line.

This will re-arrange as per the device’s screen size. You can use the grid in the .row class. Row class is must be required for grids. because this will help to arrange the columns of the grid. and the row class should be nested of .container class. You can use rows in the .container class.

Bootstrap 4 divides grids into 5 different layers. Like, when you open your website in less than 575px screen size device there .col-* will works. and when you open your website between 575px to 768px in this case .col-sm-* will work. while website open between 768px to 992px there .col-md-* will work. after that, If your website opens on the laptop screen I mean to say that the screen size is between 992px to 1200px. Here you will see .col-lg-* works there. In the last when you web open in the large screen like more than 1200px there .col-xl-* will work well and good.

.col-* founded in the Bootstrap version 4. lowest versions of bootstrap 4 .col-sm-* works. There col-* is not allowed.

Size of grids in different screens


Screen SizeColumns worksGrid size
Less then 575pxcol-*auto
Between 575px to 768pxcol-sm-*540px
Between 768px to 992pxcol-md-* 720px
Between 992px to 1200pxcol-lg-* 960px
More then 1200pxcol-xl-* 1140px

I hope this one is cleared in you mind. now we will go how we can implement grids in our website.

How to Implement Bootstrap 4 Grid


Implementation of the grid is very easy. this will make you some confusing but this is too much easy. I will clean this one for you in an easy way. While you have gone to use grid you have to mind some points which help you to clear this concept of the bootstrap 4 grid system.

Point 1: You can use the grid system nested of .row or .container classes.
Point 2: You can use a maximum of 12 columns in one row. If you can add 13 column then this will go in the bottom of the row.
Point 3: You can use the minimum of 1 column in one row.

You can use the grid as you want. like you can use 1 column, 2 columns, 3 columns, 4 columns, 6 columns, 12 Columns. Keep in mind the total of columns must 12. Let’s see all the examples.

Examples of Bootstrap 4 Grid System


If you want to use the same grids in all the devices then you can use any one there are no issues. for example if you want only one column in all the devices then you can by using only col-12. This is same for all the examples.

1 Column example:


2 Column example:


4 Column example:


Here we have used col-md-* that’s mean, while website open in col-md-* then this will divide the screen into 4 divisions. But in the lower of col-md, this will work like col-12.

12 Column example:


In this case, We have to define col-md-1 which means When screen open in md size grid will convert in 12 columns. but this works largest screen then md size. when the website opens in lower then md, in this case, col-6 will in the work mode. and screen divide in 2 partisans.


Read Also:


1. Introduction of Bootstrap 4

2. What is the difference between Bootstrap 3 and Bootstrap 4?

3. Advantages of Using Bootstrap 4

4. Online or Offline? How should you use bootstrap 4 Online or Offline? Why?

5. Bootstrap 4 Grid System with Separated Examples

6. Bootstrap 4 Tables with structured and easy examples

7. Bootstrap 4 Buttons with structured and easy examples

8. Bootstrap 4 Cards with structured and easy examples

9. Bootstrap 4 Dropdowns with structured and easy examples

10. Bootstrap 4 Navs with structured and easy examples

11. Bootstrap 4 Navbar with structured and easy examples

12. Bootstrap 4 Carousel with easy examples

13. Bootstrap 4 Modal with easy examples

** Conclusion **


I hope you have understood the full concept of the Grid system of bootstrap 4. If you have any kind of questions then you can ask me any time in the below comment box. Ask questions more and more because this will help needy peoples. I will give you all the answers very quickly as soon as possible.