Understand Bootstrap Grid System

Bootstrap Grid System

Bootstrao grid system providing the easiest way to create a responsive website layouts. The main quality is it provides responsive, mobile first grid system which scales the columns as the device or the viewport size changes. Flexbox is the base of bootstrap’s grid system it allows up to 12 columns across the page.

as you know the grid system is responsive. As per the screen size the columns will rearrange automatically. The total sum of columns must be 12.

Now we can Check the classsed provided – Grid Classes

The new version Bootstrap 4 grid system has five classes.

.col- (extra small devices – screen width less than 576)
.col-sm (small devices – screen width equal to or greater than 576)
.col-md small devices – screen width equal to or greater than 768)
.col-lg small devices – screen width equal to or greater than 992)
.col-xl small devices – screen width equal to or greater than 1200)

All the above classes you can use as per your needs for dynamic and flexible layouts

bootstrap grid system

Understand Basic structure of Bootstrap 4 Grid
Two Column Layout

<!--controlled the column width -->
<div class="row">
  <div class="col-md-6"></div> 
  <div class="col-md-6"></div>
</div>

<div class="row">
  <div class="col-md-8"></div> 
  <div class="col-md-4"></div>
</div>
<div class="row">
  <div class="col-md-7"></div> 
  <div class="col-md-5"></div>
</div>

Three Column Layout

<div class="row">
  <div class="col-lg-4"></div> 
  <div class="col-lg-4"></div>
  <div class="col-lg-4"></div>
</div>

Try above on editor codepen