Loading…

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>

Suggest An Answer

No suggestions avaliable!

Latest post from Bootstrap 4 Interview Questions

Ask Question