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.

• 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.

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>