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

Large Grid Example

XSmall Small Medium Large extra Large XXL
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Screen width >=576px >=576px >=768px =992px >=1200px >=1400px

The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large, xlarge and xxlarge devices. On extra small devices, it will automatically stack (100%):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.

Example

    <div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>Sed ut perspiciatis...</p>
   </div>
  </div>
</div>
You can click on above box to edit the code and run again.

Auto Layout Columns

In Bootstrap 5, there is an easy way to create equal width columns for all devices: just remove the number from .col-sm-* and only use the .col-sm class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.

If the screen size is less than 576px, the columns will stack horizontally:

1 of 2
2 of 2

1 of 4
2 of 4
3 of 4
4 of 4

Example

    <div class="row">
  <div class="col-lg">1 of 2</div>
  <div class="col-lg">2 of 2</div>
</div>

<!-- Four columns: 25% width on large and up -->
<div class="row">
 <div class="col-lg">1 of 4</div>
  <div class="col-lg">2 of 4</div>
  <div class="col-lg">3 of 4</div>
  <div class="col-lg">4 of 4</div>
</div>
You can click on above box to edit the code and run again.

Output