In the previous tutorial, we got familiar with the responsive design and realized that we can design a responsive website with Bootstrap. Today we want to know about the “Grid System”, the most important concept in Bootstrap…. Stay with HardText.
The grids are the most important foundation of Bootstrap and other responsive frameworks.
Actually, the width of the page is divided into a certain number of columns, which depending on the different frameworks, the divisions are different.
By the grid system we mean that, for example, we see how many columns have been assigned to each of our elements on the page. See the image below:
Suppose that our outline has a header, a sidebar on the right side, a smaller sidebar on the left side and eventually our main content.
Now, as I said, we must look at how many columns have been assigned to each to our elements on the page.
If we divide the width of our page into 12 columns, we can simply recognize that how many columns have been assigned to each our elements on the page. Why 12?
Well, the structure of Bootstrap is in a way that it divides the screen width into 12 same-width columns with a small amount of space between them.
This grid system is different in other frameworks. Some frameworks have 16 columns.
We can place 6 elements together with the width of 2 columns, or 4 elements with the width of 3 columns, etc.
Why we Use Grid System?
The Bootstrap standard and criteria are based on the grid columns. This means, for example, Bootstrap must realize that how many columns of the 12 columns the B-side incorporates on a big screen (such as laptops), and how many columns of the 12 columns may be occupied by the same B-side in a smaller width (for example tablets). It is clear that the width of the columns will change to fit the width of the screen.
The third version of Bootstrap has considered 4 ranges of screen widths and has assigned a specific name to each of them.
- xs– Extra Small Devices – ( <768px )
- sm – Small Devices – ( ≥768px & <992px )
- md – Medium Devices – ( ≥992px & <1200px )
- lg – Large Devices – ( ≥1200px )
So in Bootstrap, we’ll design for these 4 sizes.
In fact, Bootstrap has written media queries for these 4 sizes, and we can easily use the written media queries by allocating these keywords in the form of a class.
The structure of the classes is defined as follows:
Col – Your desire size – Number of columns
For example, if we assign a “col-sm-4” class to an element, the size of this element in a smaller size is equal to 12/4 of the width of its parent.
So we must actually specify 4 classes for each of our elements. We must determine how many columns will they assign to themselves in Size “XS”. How many columns in sizes “sm”, “md”, and also “lg”?
Another important point is that the structure of Bootstrap is mobile-first. It means that you have to start designing for the size “XS” and assign the “XS” class to each tag first.
As you can see, Bootstrap media queries are written in 4 different modes:
As a result, you must first define the number of columns for xs and then sm and then md and finally lg.
You should know that if you don’t specify the number of columns for each of these sizes, it inherits the size from its smaller size, for example, consider the following code:
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">1</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">2</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">3</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">4</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">5</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">6</div>
In the above code, we specified the number of columns for each tag, in any size. This means that each of the above tags in the XS mode occupies all 12 columns (a full row), and in the sm size, they occupy half a row, and as a result, they are placed two by two in each row. So obviously, with these conditions in md size, we have 4 tags in each row and in lg size all the 6 tags are placed side by side.
Usually, we put the above tag within the “.row” class tag. Just like the <table>, which <td> is a direct child of <tr>.
Another point is that the rows should also be a direct child of the “Container” Or “Container-fluid” Class.
The “Container” Or “Container-fluid” is a Wrapper.
Container-fluid: In all four cases, it occupies the entire width of the page.
Container: The width in “lg” mode is 1170 px and in “md” mode is 970px and in “sm” mode is 750px.
So finally, our contents will be placed within the columns and all our columns will be placed within the rows (with the row class) and all our rows are the direct child of the Container Or Container-fluid.
Keep in mind, if our first tag has 8 columns and the next tag has 5 columns, the second tag is moved to the next line because there should be only 12 columns in each row.