Bootstrap Grid System and How it Works

Hello Friends, In the last article I told you what is bootstrap and its benefit. The layout of 95% of the websites appearing on the internet is a bootstrap base. Before creating a website on bootstrap, it is very important to understand the grid system of bootstrap.

Friend, in this article, I will tell you what is the bootstrap grid system, how it works, how we create a professional website with the help of the bootstrap grid system.

What is Grid

Grid is one type of structure (like Graph paper) that allow us to combine horizontal and vertical line and writing some content inside the structure. To fix the height and width of the content, we divided it into rows and columns.

Similarly, the grid system of Bootstrap is used to make the website responsive, mobile-friendly, and giving it a professional look.

Bootstrap Grid System

Bootstrap grid system

The bootstrap Grid system is divided into 12 parts and it’s content responsive within each part whether it is a large-scale device desktop to a small-scale device like mobile.

What is column re-arrange system

when your website is divided into 3 columns in a large screen device, then it will be set automatically in one column above the other on your mobile screen.

Bootstrap grid system made up of three things:-

  1. Container
  2. Row
  3. Column
  1. What is container class:-

Container class is primary class used to design a website.

Two type of container classes

  • Container:- you must have seen a lot of websites on the internet, where a little space is given both left and right side, it means that the container class is used there.
<div class="container"></div>

  • Container-fluid:- Container-fluid class is used when a web page is to be developed in full-length screen size.
<div class="container-fluid"></div>

2. What is Row Class:-

Row class is inside the container class. Row class is horizontal. Row class is represented by “.row”. There is at least one row class inside every container class.

3. What is Column Class:-

Bootstrap grid system has 4 type of column classes.

If you want a similar design for tablet and mobile device, only use class col-xs.

Class name Support device Screen Size in px
col-lg- large Screen device Desktop >=1200px
col-md- Medium Screen device laptop >=992px
col-sm- Small screen device Tablet >=768px
col-xs- Extra small screen device Mobile <768px

Declare the column class in each row class. Column class is represented by “.class”. The column class is vertical. We can divide our content into different columns according to the device.

Column Rules:-

  1. There is at least one column class inside every row class.
  2. A row has a maximum of 12 columns.
  3. The row must be placed in container and container fluid.
  4. Content always placed inside the column.

Column rules for large scale device:-

  1. For this example, I want to tell you, if you want to show content (text and image) in 1 column for a large device.
<div class="container">
<div class="row">
<div class="col-lg-12">Column 1</div>
</div>
</div>

2. For this example, I want to tell you if you want to show content (text and image) in 2 columns for large devices.

<div class="container">
<div class="row">
<div class="col-lg-6">Column 1</div>
<div class="col-lg-6">Column 2</div>
</div>
</div>

3. For this example i want to tell you, if you want to show content (text and image) in 3 column for large device.

<div class="container">
<div class="row">
<div class="col-lg-4">Column 1</div>
<div class="col-lg-4">Column 2</div>
<div class="col-lg-4">Column 3</div>
</div>
</div>

4. For this example I want to tell you if you want to show content (text and image) in 4 columns for large devices.

<div class="container">
<div class="row">
<div class="col-lg-3">Column 1</div>
<div class="col-lg-3">Column 2</div>
<div class="col-lg-3">Column 3</div>
<div class="col-lg-3">Column 4</div>
</div>
</div>

5. For this example i want to tell you, if you want to show content (text and image) in 6 column for large device.

<div class="container">
<div class="row">
<div class="col-lg-2">Column 1</div>
<div class="col-lg-2">Column 2</div>
<div class="col-lg-2">Column 3</div>
<div class="col-lg-2">Column 4</div>
<div class="col-lg-2">Column 5</div>
<div class="col-lg-2">Column 6</div>

</div>
</div>

Column rules for medium scale device:-

  1. For this example, I want to tell you, if you want to show content (text and image) in 1 column for a medium device.
<div class="container">
<div class="row">
<div class="col-md-12">Column 1</div>
</div>
</div>

2. For this example, I want to tell you if you want to show content (text and image) in 2 columns for medium devices.

<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>

3. For this example I want to tell you if you want to show content (text and image) in 3 columns for the medium device.

<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>

4. For this example I want to tell you if you want to show content (text and image) in 4 columns for medium devices.

<div class="container">
<div class="row">
<div class="col-md-3">Column 1</div>
<div class="col-md-3">Column 2</div>
<div class="col-md-3">Column 3</div>
<div class="col-md-3">Column 4</div>
</div>
</div>

5. For this example I want to tell you if you want to show content (text and image) in 6 columns for the medium device.

<div class="container">
<div class="row">
<div class="col-md-2">Column 1</div>
<div class="col-md-2">Column 2</div>
<div class="col-md-2">Column 3</div>
<div class="col-md-2">Column 4</div>
<div class="col-md-2">Column 5</div>
<div class="col-md-2">Column 6</div>

</div>
</div>

How to declare multiple classes for one div element:-

Suppose I want to show my content to different devices. For large devices, I want to show 4 columns, medium device show in 3 columns, and small and extra small device show in one row.

<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">Column 1</div>
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">Column 2</div>
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">Column 3</div>
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12">Column 4</div>

</div>
</div>

In this example, Your content will be split by 25% for small devices, 50% for the medium device and 50% split for large devices.

So friends, I hope you have liked this blog, if you like this blog, then let me know by commenting.

Add a Comment

Your email address will not be published. Required fields are marked *