HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

Bootstrap Grid

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

Grid Classes

The Bootstrap grid system has six classes:

  • .col- (extra small devices - screen width less than 576px)
  • .col-sm- (small devices - screen width equal to or greater than 576px)
  • .col-md- (medium devices - screen width equal to or greater than 768px)
  • .col-lg- (large devices - screen width equal to or greater than 992px)
  • .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
  • .col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)

Example

 <div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>Column 1</p>
    </div>
    <div class="col-md-4">
      <p>Column 2</p>
    </div>
    <div class="col-md-4">
      <p>Column 3</p>
    </div>
  </div>
</div>
You can click on above box to edit the code and run again.

Output