Bootstrap 5 Grid: Stacked to Horizontal Explained

The Bootstrap 5 grid system is a robust framework for designing responsive layouts. A common requirement is to stack elements vertically on smaller screens and display them horizontally on larger screens. This behavior is easily achieved using Bootstrap’s responsive grid system and breakpoint classes.

In this guide, we’ll dive into stacked-to-horizontal layouts in Bootstrap 5, providing examples and practical tips.

What Does “Stacked to Horizontal” Mean?

• Stacked Layout: Elements are displayed one below the other (vertically).
• Horizontal Layout: Elements are displayed side-by-side (horizontally).

With Bootstrap 5, you can seamlessly create layouts that adapt to screen size:

• Stacked on smaller screens (like mobile devices).
• Horizontal on larger screens (like tablets or desktops).

How to Create a Stacked-to-Horizontal Layout

Bootstrap 5 uses the grid system’s breakpoint classes to define how columns behave at various screen sizes. The process involves:

1. Defining a row using the .row class.
2. Adding column classes with breakpoint prefixes (e.g., .col-sm-*, .col-md-*).

Basic Example

Here’s a simple example of stacking on mobile screens and horizontal alignment on larger screens:

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

How It Works:

• On screens less than 768px (mobile), the columns stack vertically.
• On screens 768px and above (desktop), the columns align horizontally.

Responsive Breakpoints for Stacked-to-Horizontal Layouts

To control how columns stack and align horizontally, Bootstrap 5 offers the following breakpoints:

Example: Fully Stacked to Horizontal Layout

This example demonstrates three columns stacked on small screens and displayed horizontally on larger screens:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-4 bg-primary text-white text-center p-3">Column 1</div>
    <div class="col-12 col-md-4 bg-secondary text-white text-center p-3">Column 2</div>
    <div class="col-12 col-md-4 bg-success text-white text-center p-3">Column 3</div>
  </div>
</div>

Key Details:

• col-12: Ensures the column takes the full width on smaller screens.
• col-md-4: Assigns 4/12 width for each column (making them horizontal) on medium screens and above.

Stacking Specific Columns While Keeping Others Horizontal

You can stack specific columns while keeping others horizontal using custom class combinations. For example:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 bg-warning text-center p-3">Column 1</div>
    <div class="col-6 col-md-3 bg-info text-center p-3">Column 2</div>
    <div class="col-6 col-md-3 bg-danger text-center p-3">Column 3</div>
  </div>
</div>

How This Works:

• col-12 col-md-6: Column 1 stacks fully on small screens but takes half the width on medium screens and larger.
• col-6 col-md-3: Columns 2 and 3 stack side-by-side on small screens and take 3/12 width each on larger screens.

Adding Spacing Between Stacked-to-Horizontal Columns

Use Bootstrap’s gutter utilities to add spacing between columns.

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-md-4 bg-light text-dark text-center p-3 border">Column 1</div>
    <div class="col-12 col-md-4 bg-light text-dark text-center p-3 border">Column 2</div>
    <div class="col-12 col-md-4 bg-light text-dark text-center p-3 border">Column 3</div>
  </div>
</div>

• g-3: Adds a gutter (spacing) of 16px between columns.

Combining Stacked-to-Horizontal Layouts with Alignment Utilities

Bootstrap alignment classes like .justify-content-* and .align-items-* let you control the layout’s alignment.

Example: Centering Columns

<div class="container">
  <div class="row justify-content-center align-items-center" style="height: 100vh;">
    <div class="col-12 col-md-6 bg-primary text-white text-center p-3">Centered Column</div>
  </div>
</div>

• justify-content-center: Centers the column horizontally.
• align-items-center: Centers the column vertically.

Real-Life Use Cases

1. Navigation Menus: Stack menu items on mobile and align horizontally on larger screens.
2. Product Listings: Display product cards in a single column on mobile and multiple columns on larger devices.
3. Forms: Stack form fields on smaller devices for usability.

FAQs About Stacked-to-Horizontal Layouts

1. Can I stack columns at multiple breakpoints?

Yes, you can use combinations like col-12 col-sm-6 col-lg-4 to define stacking behavior at various breakpoints.

2. How do I make columns always horizontal?

Use the .row class with fixed column sizes like .col-* without specifying breakpoints.

3. Is it possible to adjust column order for stacked layouts?

Yes, Bootstrap’s .order-* classes let you reorder columns dynamically.

Conclusion

The stacked-to-horizontal layout is one of the most powerful features of the Bootstrap 5 grid system. By leveraging responsive breakpoints, you can create flexible and mobile-first designs that adapt seamlessly across devices.