DEV Community

Khushboo Chaturvedi
Khushboo Chaturvedi

Posted on

Introduction to Bootstrap Grids

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

Image Source: Stephany's CSS Grids Blog on dev.to

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

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

different size grids

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

breakpoint eg phone

Images source: Netflix India's Website

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.

    <div class="container"></div>
Enter fullscreen mode Exit fullscreen mode

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.

    <div class="container">
          <div class="row">
            <div class="col"> 1 </div>
          </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

basic grid 1

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

If we add one more column...

      <div class="container">
        <div class="row">
          <div class="col"> 1 </div>
          <div class="col"> 2 </div>
        </div>
      </div>
Enter fullscreen mode Exit fullscreen mode

basic grid 2

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

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.

<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>
Enter fullscreen mode Exit fullscreen mode

column width 1

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.

<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>
Enter fullscreen mode Exit fullscreen mode

column width 2

Responsive Column Widths

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

responsive column width

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

Image Source: Bootstrap Grids Documentation

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.

<div class="container">
  <div class="row">
    <div class="col-md-6"> 1 </div>
    <div class="col-md-6"> 2 </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Reference Links

Top comments (0)