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

Bootstrap 5 Grid Medium

If you want to modify the Bootstrap grid example to make it responsive for medium-sized screens, you can use the 'col-md-' classes. Here's an 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 and a 50%/50% split on medium (and 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">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
You can click on above box to edit the code and run again.

Using Only Medium

In the example below, we only specify the .col-md-6 class (without .col-sm-*). This means that medium, large, extra large and XXL devices will split 50%/50% - because the class scales up. However, for small and extra small devices, it will stack vertically (100% width):

Example

    <div class="row">
   <div class="col-md-6">
     <p>Lorem ipsum...

   </div>
   <div class="col-md-6">
     <p>Sed ut perspiciatis...

   </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-md-* and only use the .col-md class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.

1 of 2
2 of 2

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

Example

    <!-- Two columns: 50% width on medium and up-->
<div class="row">
  <div class="col-md">1 of 2</div>
  <div class="col-md">2 of 2</div>
</div>

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

Output