BootStrap 5 Grid System Stacked to Horizontal

Bootstrap 5 Grid System is a way to create layouts that are responsive and highly customizable. Grids can be arranged in a lot of different ways from which stacked vertically and placed horizontally beside each other are the most basic ones. We can use the responsive classes in a way that the classes are stacked initially and when the viewport size exceeds the size given in the grid class, the grid gets placed beside each other.

Bootstrap 5 Grid system Stacked to horizontal Class:

• col-[sm/md/lg/xl]-[1-9]: This class is added to the columns of the grid to make it horizontal when the viewport reaches the screen size given in the class.

Syntax:

<div class="row">
 <div class="col-[sm/md/lg/xl]-[1-9]">
 ...
 </div>
 ...
</div>

Example 1: The code below demonstrates how we can make the Stacked to Horizontal to work with the Grid responsive classes where the elements of the grid are text-only cards.

Output:

Example 2: The code below demonstrates how the Stacked to Horizontal Grid works inside a modal with the Grid responsive classes where the grid changes when the viewport changes to lg.

Output:

Reference:https://getbootstrap.com/docs/5.1/layout/grid/#stacked-to-horizontal