Learn with us

In Bootstrap 5, you can stack columns vertically on small screens and switch to a horizontal layout on larger screens using the responsive grid classes. Here’s how you can achieve this effect:

1. Stacking Columns (Vertical):
   By default, columns in Bootstrap 5 stack vertically on small screens. You can simply define your column structure within a row and the columns will stack on top of each other on screens smaller than the specified breakpoint.

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

In the above example, the columns will stack vertically on screens smaller than the breakpoint specified for the col class (e.g., sm, md, lg, xl, xxl).

2. Horizontal Layout (Desktop and Larger):
   To switch to a horizontal layout on desktop and larger screens, you can use the responsive grid classes that define the number of columns each column should occupy. For example, if you want the columns to occupy 4 columns each on desktop and larger screens, you can use the col-{breakpoint}-4 class.

<div class="container">
  <div class="row">
    <div class="col-sm-4">Column 1</div>
    <div class="col-sm-4">Column 2</div>
    <div class="col-sm-4">Column 3</div>
  </div>
</div>

In this example, the columns will stack vertically on screens smaller than the sm breakpoint, and switch to a horizontal layout where each column occupies 4 columns on sm and larger screens.

By combining the default stacking behavior with responsive grid classes, you can achieve the effect of columns stacking vertically on small screens and switching to a horizontal layout on larger screens. Remember to adjust the column classes and breakpoints according to your specific layout requirements.

Make sure to include the necessary Bootstrap 5 CSS file in your project for the grid system to work properly.