Bootstrap Grid System

Introduction

The Bootstrap grid system is responsive and columns will rearrange depending on the screen size.

Bootstrap grid system allows the developer to use a maximum of 12 columns in a Web page. If you do not wish to use all 12 columns separately, you can use all 12 columns together to make a wider column.

The important thing to remember while making the web pages is that grid column adds up to 12 for a row, any more than that and the column will come up in a stack. It does not matter what the viewport is.

Grid Classes

Bootstrap grid system has four pre-defined classes, which we can use for different viewports. Let us have a quick look at these classes.

xs is used for the mobiles phone viewport.
sm is used for the tablets viewport.
md is used for the desktops or laptops viewport.
ld is used for the big screen desktops viewport.

We can use all the classes listed above together to give a more dynamic and flexible view to a Web page.

Grid System Rules

Some basic grid system rules are given below.

For proper alignment and padding, the row must be placed within a .container (fixed-width) or .container-fluid (full-width).
Some predefined classes like .row and .col-sm-4 are available for quick reference.
Content should be placed within the column.
Only the column should be the immediate child or the row.

Basic structure of a Bootstrap Grid

Now, let us shift our focus towards the basic structure of a Bootstrap grid.

In the example given above, first we have created a container by using (<div class=”container”>), followed by creating a row (<div class=”row”>). Now, add the desired number of the column width (<div class=col-*-*>). The column should always add up to 12 in a single row.

Examples

Stack to horizontal

The first example of Bootstrap grid view that we are going to look is stack to horizontal. In this, we will create a basic grid view, which will first open as a stack on the mobile, before becoming horizontal on the desktops.

First, we will create a Bootstrap template, HTML page name “Stackhorizontal.html” by using the code given below.

Now, we will create a two column layout in such a manner that it will show 100% of the stack on the extra small screens and will be 50-50% split on all the other screens.

Output

When we open this Webpage in a medium or large screen, it will look as shown below.

The results given below will come out when we open this web page on a small screen.

Small Device Grid View

Small devices are defined as having a screen with 768 pixels to 991 pixels. For the small devices, we will use .col-sm* classes. Let us see a simple example of a small device's grid view.

Output

There will be the two outputs. First, it will be on Small, Medium and Large screen web pages, which will look, as shown below.

On extra small screens, it will give a stack view.

Medium Device Grid View

Medium devices are defined as having a screen with 992 pixels to 1192 pixels. For the medium devices, we will use .col-md* classes. Let us see a simple example of a medium device's grid view.

Output

Medium and large screen display will look, as shown below.

Small device displays will show stack view.

Large Device Grid View

Medium devices are defined as having a screen with 1200 pixels and above. For the large devices, we will use .col-lg* classes. Let us see a simple example of a large device's grid view.

Output

First, take a look at a large screen view.

Output on medium screens is given below.

Output on small screens is given below.

Mobile and Desktop Combined Grid View

As discussed earlier in this article, Bootstrap grid system has four classes i.e. xs, sm, md and lg. Classes can be combined together to create more dynamic and flexible layouts.

Output

In this article, we learned the Bootstrap grid system. I hope this will help you to understand Bootstrap grid system.