Bootstrap 4 Grid system

Hello devs, here is a quick tutorial on the bootstrap 4 grid system. I will try to talk on many things as possible. Bootstrap can be used in reactJS as well and it’s pretty useful. One of the main things you need to learn is the grid system. It is important because with it you will able to position things easily and by using less code. In this article I will show you some examples.

Let’s start by dividing a row into equal columns.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of the columns
    </div>
    <div class="col-sm">
      One of the columns
    </div>
    <div class="col-sm">
      One of the columns
    </div>
    <div class="col-sm">
      One of the columns
    </div>
  </div>
</div>

In the example, I created a container which will contain everything. After, I created a row which will contain four columns. In bootstrap there are different breakpoints: extra-small, small, medium, large and extra-large. When we write ‘col-sm’ it applies to small, medium, large and extra-large devices. If we write ‘col-md’ it applies to medium, large and extra-large devices.

A row is formed by 12 equal “parts”. When we create a column in a row, we can specify how many parts we want it to take of the total 12 parts. Let’s say we want a column to take 6 parts and another column to take 3 parts. That’s what we’ll do:

<div class="container">
  <div class="row">
    <div class="col-6">
      One of the columns
    </div>
    <div class="col-3">
      One of the columns
    </div>
  </div>
</div>

We can also add another column which will take the rest of the space:

<div class="container">
  <div class="row">
    <div class="col-6">
      One of the columns
    </div>
    <div class="col-3">
      One of the columns
    </div>
    <div class="col">
      One of the columns
    </div>
  </div>
</div>

When we don’t specify the number of parts, the column will take all the available parts.

<div class="container">
  <div class="row">
    <div class="col">
      One of the columns
    </div>
    <div class="col-8">
      One of the columns
    </div>
    <div class="col">
      One of the columns
    </div>
  </div>
</div>

In the above example. The column in the middle will take eight parts of the row, while the first and last column don’t have a specific number, so they will share the space (each one of them will get 2 parts).

This was a quick introduction on the bootstrap 4 system grid. I will make another one similar soon! Thank you for reading it!

check other posts