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.
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.
Whereas in this picture the blocks take the size of four, two and three columns respectively.
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.
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>
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>
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>
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.
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>
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>
Responsive Column Widths
Notice that the column sizes remain same even in mobile display.
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.
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>
Oldest comments (0)