BootStrap 4 Grid System

With BootStrap 4 version, the grid system has also been improved and made more functional by adding new features. 

While 4 screen modes (xs, sm, md and lg) are used in BootStrap3 version, 5 different classes are used in 4 versions. 

You may have noticed that the xs class in BootStrap 3 is gone.

The usage logic of the grid system is the same as the BootStrap 3 grid system described in the previous topic. But additional usage methods are also added.

Let's get to know the BS4 grid system with various examples.

In the example above, the 3 div elements will be placed side by side on cm and larger screens and have equal width. The 4 in the col-sm-4 expression indicates that 4 out of 12 of the width of that line will be reserved for that element. We know this from our previous topic.

In addition, when the screen class specified in the col-sm-4 class is sm and nothing is specified for larger screens, this class is also valid for screens larger than sm.

Usage as above is an innovation that comes with BootStrap 4. If we just apply the .col class to the div elements, they are automatically set to all be of equal width according to the number of divs in the row. 

Since the col class is applied to 4 div elements in the example, each will have a width of 25%. Also, since the screen class is not specified, this will be the same for all screen widths from smallest to largest.

The use of col-* as above is also the innovation of BS4. As the xs class has been removed, the layout on the smallest screens can be adjusted as above.

Let's explain how the above example will work for all display classes separately:

• Extra-small screens - (Smaller than 576px screens): 3 divs are nested one after the other because no class is applied to the divs for this screen type. 
• Sm - small (576 px and larger screens): The first 2 divs will be placed side by side and have 50% width, while the 3rd div will go down and have 100% width. Because a class for small screens is not applied to the 3rd div.
• Md - medium (768 px and larger screens): No special class for md screens is applied to any of the 3 div elements. In this case, the class applied to the nearest of the smaller classes will be valid. That is, the first 2 divs are next to each other and occupy 50%, while the third div is at the bottom and occupies 100% width.
• Lg - large (992 px and larger screens): Since the col-lg-4 class related to LG displays is applied to all 3 divs, they are placed side by side and occupy 33.3% width.
• xl - extra large (screens larger than 1200 px): Since no class is implemented for xl screens, the col-lg-4 class applies and the 3 divs are placed side by side.

EXERCISES