Bootstrap 5 Grid: From Stacked to Horizontal

Grid example: Stacked horizontally

Let's create a basic grid system that starts off stacked on extra small devices and then becomes horizontal on larger devices.

The following example demonstrates a simple two-column layout with 'Stacked horizontally', which means it will produce a 50%/50% split on all screens, except for extra small screens, which will automatically stack (100%):

Example: Stacked horizontally

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Column 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Column 2 ...</p>
    </div>
  </div>
</div>

Try It Yourself

Tip:.col-sm-* The number in the class indicates how many columns the div should span (total of 12 columns). So,}.col-sm-1 Spanning 1 column,.col-sm-4 Spanning 4 columns,.col-sm-6 Spanning 6 columns, etc.

Note:Make sure the total is 12 or less (you do not need to use all 12 available columns):

Tip:By setting .container-fluid class to .containerYou can change any full-width Layout Transitions to fixed-width Responsive Layout:

Example: Responsive Container

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Column 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Column 2 ...</p>
    </div>
  </div>
</div>

Try It Yourself

Automatic Layout Columns

In Bootstrap 5, there is a simple way to create equal-width columns for all devices: just from .col-size-* Remove the numbers and use only on the col element .col-size Classes. Bootstrap recognizes how many columns there are, and each column will receive the same width. The size classes (sm, md, etc.) determine when columns should respond:

<!-- Two columns: 50% width on all screens, except extra small devices (100% width) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- Four columns: 25% width on all screens, except extra small devices (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</div>
</div>

Try It Yourself