Can you explain the basic Structure of a Bootstrap 4 Grid?
The Bootstrap 4 grid System is developed with flexbox has a limit of 12 columns across the entire page. If a developer does not want to use the 12 columns individually then, it can be merged to create a full column. The grid system in Bootstrap 4 is responsive and also depending upon the screen size the columns are re-arranged dynamically. The UI developer has to make sure that the sum must be 12 or less than 12.
The bootstrap 4 grid system has the following five classes:-
- col- (for an extra small devices whose screen width less than 576px)
- col-sm- (for a small devices whose screen width equal to or greater than 576px)
- col-md- (for a medium devices whose screen width equal to or greater than 768px)
- col-lg- (for large devices whose screen width equal to or greater than 992px)
- col-xl- (for xlarge devices whose screen width equal to or greater than 1200px)
The above classes can be united to create a flexible and dynamic layout.
Example
Basic Structure:-
<!-- Control the width of the column, and how they should look on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically manages the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>