The Bootstrap grid system is the fastest and easy way to create responsive website layout.

What is Bootstrap Grid System?

Bootstrap grid system provides an easy and powerful way to create responsive layouts of all shapes and sizes. It is built with flexbox with mobile-first approach. Also, it is fully responsive and uses twelve column system (12 columns available per row) and six default responsive tiers.

You can use the Bootstrap’s predefined grid classes for quickly making the layouts for different types of devices like mobile phones, tablets, laptops, desktops, and so on. For example, you can use the .col-* classes to create grid columns for extra small devices like mobile phones in portrait mode, and the .col-sm-* classes for mobile phones in landscape mode.

Similarly, you can use the .col-md-* classes to create grid columns for medium screen devices like tablets, the .col-lg-* classes for devices like small laptops, the .col-xl-* classes for laptops and desktops, and the .col-xxl-* classes for large desktop screens.

The following table summarizes the key features of the Bootstrap’s grid system.

FeaturesBootstrap  Grid System	X-Small (xs)<576px	Small (sm)≥576px	Medium (md)≥768px	Large (lg)≥992px	X-Large (xl)≥1200px	XX-Large (xxl)≥1400px
Container max-width	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-
Number of columns	12
Gutter width	1.5rem (.75rem on left and right)
Custom gutters	Yes
Nestable	Yes
Column ordering	Yes

Above table demonstrates one important thing, applying any .col-sm-* class to an element will not only have an effect on small devices, but also on medium, large and extra large devices (viewport width ≥768px), if a .col-md-*, .col-lg-*, .col-xl-*, or .col-xxl-* class is not present.

Similarly, the .col-md-* class will not only have an effect on medium devices, but also on large and extra large devices if a .col-lg-*, .col-xl-*, or .col-xxl-* class is not present.

Now the question arises how to create rows and columns using this 12 column responsive grid system. The answer is pretty simple, at first create a container that acts as a wrapper for your rows and columns using any container classes such as .container, after that create rows inside the container using the .row class, and to create columns inside any row you can use the .col-*, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-* and .col-xxl-* classes.

The columns are actual content area where we will place our contents. In the following sections we will put all these things into real action and see how it actually works:

Creating Two Column Layouts

The following example will show you how to create two column layouts for medium, large and extra large devices like tables, laptops and desktops etc. However, on mobile phones (screen width less than 768px), the columns will automatically become horizontal (2 rows, 1 column).

Example

<div class="container">
    <!--Row with two equal columns-->
    <div class="row">
        <div class="col-md-6">Column left</div>
        <div class="col-md-6">Column right</div>
    </div>
    
    <!--Row with two columns divided in 1:2 ratio-->
    <div class="row">
        <div class="col-md-4">Column left</div>
        <div class="col-md-8">Column right</div>
    </div>
    
    <!--Row with two columns divided in 1:3 ratio-->
    <div class="row">
        <div class="col-md-3">Column left</div>
        <div class="col-md-9">Column right</div>
    </div>
</div>

Note: In a grid layout, content must be placed inside the columns (.col and .col-*) and only columns may be the immediate children of rows (.row). Also, rows should be placed inside a container (either fixed or fluid) for proper padding and alignment.

Tip: Grid column widths are set in percentages, so they’re always fluid and sized relative to their parent element. In addition, each column has horizontal padding (called a gutter) for controlling the space between individual columns.

Since the Bootstrap grid system is based on 12 columns, therefore to keep the columns in a one line (i.e. side by side), the sum of the grid column numbers within a single row should not be greater than 12. If you go through the above example code carefully you will find the numbers of grid columns (i.e. col-md-*) add up to twelve (6+6, 4+8 and 3+9) for every row.