What is Bootstrap Grid System?

 I don't want to go through every single detail of what Bootstrap Grid System can do because there is a lot and as I mentioned in the last part of What is Bootstrap? Why use it? the best way to know a tech in detail is to go through their documentation again and again. However, I do want to share some fundamentals to get a working knowledge of the Grid System.

Bootstrap Grid System assumes 12 equal divisions of any screen. So, whatever device you have been using be it a mobile phone, tablet, laptop, or desktop. The total screen width has been split into 12 equal parts. Now, out of these 12 divisions, any number of divisions ranging from 1-12 can be applied to different HTML elements. The higher the number, the more width that particular element takes on the screen.

Let's write this simple piece of code:-

1. <div class="row mt-4 text-center">
2.     <div class="col-12 border bg-info py-4">
3.         12/12 or 100% of total width available</div>
4. </div>
5. <div class="row mt-4 text-center">
6.     <div class="col-3 border bg-primary py-4">
7.         3/12 or 25% of total width available</div>
8.     <div class="col-6 border bg-success py-4">
9.         6/12 or 50% of total width available</div>
10.     <div class="col-3 border bg-danger py-4">
11.         3/12 or 25% of total width available</div>
12. </div>
13. <div class="row mt-4 text-center">
14.     <div class="col-3 border bg-secondary py-4">
15.         3/12 or 25% of total width available</div>
16.     <div class="col-6 border bg-success">
17.         6/12 or 50% of total width available
18.         <div class="row">
19.             <div class="col-4 border bg-primary py-4">
20.                 4/12 or 33.33% of total width available</div>
21.             <div class="col-8 border bg-dark py-4">
22.                 8/12 or 66.66% of total width available</div>
23.         </div>
24.     </div>
25.     <div class="col-3 border bg-secondary py-4">
26.         3/12 or 25% of total width available</div>
27. </div>
28. </div>

And here's the resultant screen:-

In the above code, try to only focus on the row and col classes used as of now. There are several other bootstrap classes as well in the code, feel free to do your own research on what they do (refer to the documentation or do a Google search).

Most of the things are self-explanatory here but 1 thing that needs to be stressed upon is the width that we allocate to an element is a fraction of the width available to that element. So, if we assign a col-6 to a certain container then that container's width is further divided into 12 equal divisions. So, now if we use a child element inside that container and assign a col-4 to it then it would take 4 parts out of the 12 divisions of its parent element instead of the whole screen's width (so the bottommost blue part in the above screen takes 1/6 (6/12 * 4/12) of the full-screen width). This can be a big gotcha moment for those who are absolutely new to UI design.

The other thing is if we use col class without using a number along with it, it will sort of assigning an auto width to the element i.e. the element's width will then adapt according to the length of content inside it. That may be the thing you want, it may not be depending on your use case.

There is 1 last important thing that I think is worth mentioning regarding the grid classes- row and col.

Whenever we use these classes, Bootstrap automatically applies some paddings and margins along with it (since that's how these classes were implemented inside Bootstrap). This generally is very useful and saves us a lot of effort, but sometimes this can result in unexpected behavior. Especially, if we notice the row class- it applies a negative margin to the left and right sides which can be very puzzling sometimes.

Luckily, Bootstrap provides another handy class to remove these automatically applied paddings and margins. This class is called no-gutters. However, this removes the horizontal padding from all the immediate children's columns. Again, that may be the thing you want or may not. But it's good to know that there is something sort of this.

Finally, if you want to set paddings and margins of a specific element in a certain way, you can always use the Bootstrap classes like p-1, m-2, px-3, pt-1, my-2, etc.

Let's stop here for now. And in the next post, I would like to discuss something which in my view is one of the most useful tools that makes Bootstrap so powerful- responsiveness.