Bootstrap 5 Grid Stacked to horizontal

"stacked-to-horizontal" two-column layout, meaning it will result in a 50%/50% split on all screens, except for extra small screens, which it will automatically stack (100%):

Example

<div class="container-fluid">
 <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

You can click on above box to edit the code and run again.

Output

Lorem ipsum...

Sed ut perspiciatis...

Auto Layout Columns

Bootstrap will recognize how many columns there are, and each column will get the same width. The size classes (sm, md, etc.) determines when the columns should be responsive:

Four columns: 25% width on all screens, except for extra small (100% width on screens less than 576px wide)

Bootstrap Grid Stacked to horizontal

 <!-- Two columns: 50% width on all screens, except for extra small (100% width) -->
 <iv class="row">
  d <iv class="col-sm">1 of 2 </div>
   <div class="col-sm">2 of 2 </div>
 </div>

 <!-- Four columns: 25% width on all screens, except for extra small (100% width)-->
 <div class="row">
   <div class="col-sm">1 of 4/ <div>
   <div class="col-sm">2 of 4 </div>
   <div class="col-sm">3 of 4 </div>
   <div class="col-sm">4 of 4/d <iv>
 </div>

You can click on above box to edit the code and run again.

Output

1 of 2

2 of 2

1 of 4

2 of 4

3 of 4

4 of 4