Introduction to Bootstrap Grids
Tags: webdev, css, bootstrap, programming
Published: 2021-11-04 19:06:53

### What is a Grid-System?

A Grid-system is a very popular and easy way of placing content onto a page in rows and columns, ensuring that they are device responsive as well. It is a great tool to make the information on your website look more organized and approachable.

![css grid layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2219az6pibggspq9rky1.png)

<p align="center">Image Source: <a href="https://dev.to/ltephanysopez/css-grid-the-basics-4ppp"> Stephany's CSS Grids Blog on dev.to</a></p>

## Bootstrap Grids

Bootstrap has a **12 column grid system** which means that in a given row we can set the width of an element to anything from one to twelve columns in width. 

For example in the below picture all three blocks are of same size and thus have a width of four columns each.

![equal grids](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n20izu0exp2goh8tz8c2.png)

Whereas in this picture the blocks take the size of four, two and three columns respectively.

![different size grids](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2fxeysw9spj913xniheg.png)

To implement this grid-system we are provided with **six break-points** which makes these grids fully-responsive as well. To put it simply, suppose that you want a particular element to take the width of 6 columns in desktop screen but it should take a width of 12 columns in mobile screen then these break-points will help you in doing so. 

![breakpoint eg desktop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnwr7kpfhmcnqwebl4o9.png)  

![breakpoint eg phone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhc8h695krul0cizgkje.png)

<p align="center">Images source: <a href="https://www.netflix.com/in/">Netflix India's Website</a></p>

### Using Bootstrap Grids

The first thing to know is that **when we are making a bootstrap grid it always goes inside a container**. Let's start by doing just that.

```html
	<div class="container"></div>
```

#### Basic Grid

Now to create columns inside this container we first have to create a div with the class `row` and then add divs with class `col` inside it.

```html
	<div class="container">
          <div class="row">
            <div class="col"> 1 </div>
          </div>
	</div>
```

![basic grid 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gyy4n5gszepe0ne0jwe.png)

In this case we have added only one column and therefore it occupies the entire row.

If we add one more column...

```html
      <div class="container">
        <div class="row">
          <div class="col"> 1 </div>
          <div class="col"> 2 </div>
        </div>
      </div>
```

![basic grid 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxh2wecp365mbxca6v9c.png)

Then both the columns will occupy 50% width of the entire row.

 If we add two more columns then each column will occupy 25% width of the entire row.

![basic grid 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhsrew7r8rgpli1iyndt.png)

#### Column Widths

But what if in the above example we want the first column to occupy half of the screen? We do it by using `col-6` class, which basically specifies that the first block will take a width of 6 columns.

```html
<div class="container">
  <div class="row">
    <div class="col-6"> 1 </div>
    <div class="col"> 2 </div>
    <div class="col"> 3 </div>
    <div class="col"> 4 </div>
  </div>
</div>
```

![column width 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t82drktir7iglmtgle09.png)

Now the first column occupies half of the row and the rest three columns are equally sized in the remaining half of the row.

Similarly, if we wanted 2nd, 3rd and 4th block to occupy a width of 3, 2 and 1 column respectively, we will do it by using `col-3`, `col-2` and `col-1` classes respectively.

```html
<div class="container">
  <div class="row">
    <div class="col-6"> 1 </div>
    <div class="col-3"> 2 </div>
    <div class="col-2"> 3 </div>
    <div class="col-1"> 4 </div>
  </div>
</div>
```

![column width 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aygjob4hv1lvm3skkphf.png)

#### Responsive Column Widths

Notice that the column sizes remain same even in mobile display.

![responsive column width](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9z67yxwm9av7qml5887.png)

This looks quite stuffed though. What if I wanted these columns to have different widths for different device sizes? This is when the responsive behavior of bootstrap grids come into play. 

Bootstrap provides us with **six break-points** namely xs, sm, md, l, xl and xxl, we can control container and column sizing by these breakpoint.

![Breakpoints](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qt4cj1x99mirj9ur2f04.png)

<p align="center">Image Source: <a href="https://getbootstrap.com/docs/5.1/layout/grid/#grid-options">Bootstrap Grids Documentation</a>

##### Example:

Let's take two columns. I want these columns to occupy half of the screen width each in desktop and tablet devices but in mobile devices I want them to occupy the entire width of the screen.

For this we will use the `col-md-6` class. This basically means that we should have a six units column on any size from medium size(tablet size) upwards. So that means on tablet, laptop and large-desktop they will take six units, but on anything smaller than the medium size, namely mobile, they will cover the entire width of the screen.

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




{% vimeo 642420524 %}



## Reference Links

- [The Net Ninja's Grid Layout Video](https://www.youtube.com/watch?v=irfbn103AzE)
- [Bootstrap Grids Documentation](https://getbootstrap.com/docs/5.1/layout/grid/)
- [W3School's Bootstrap Grid Documentation](https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp)