Prev Next

BS5 Stacked/Horizontal

Bootstrap 5 allows you to create stacked or horizontal layouts for columns using the grid system. By default, columns stack vertically on smaller screens and align horizontally on larger screens.

Key Topics

Stacked Columns

Columns stack vertically by default on smaller screens, making them ideal for responsive designs.

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

Explanation: By default, columns in a row will stack vertically on smaller screens.

Horizontal Columns

Ensure columns remain horizontal by using the .row and responsive classes like .col-* for larger screens.

<div class="container">
    <div class="row">
        <div class="col-6">Horizontal Column 1</div>
        <div class="col-6">Horizontal Column 2</div>
    </div>
</div>

Explanation: Use responsive classes like .col-6 to create horizontally aligned columns on larger screens.

Mixed Layouts

Create mixed layouts where some columns stack and others align horizontally, depending on screen size.

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6">Mixed Column 1</div>
        <div class="col-sm-12 col-md-6">Mixed Column 2</div>
    </div>
</div>

Explanation: Combine classes like .col-sm-12 and .col-md-6 to create layouts that stack on smaller screens and align horizontally on larger screens.

Complete Stacked/Horizontal Example

Below is a complete example showcasing stacked and horizontal layouts for different screen sizes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Stacked/Horizontal Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Stacked/Horizontal</h2>
        <div class="row mb-3">
            <div class="col">Stacked Column 1</div>
            <div class="col">Stacked Column 2</div>
        </div>
        <div class="row mb-3">
            <div class="col-6">Horizontal Column 1</div>
            <div class="col-6">Horizontal Column 2</div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-6">Mixed Column 1</div>
            <div class="col-sm-12 col-md-6">Mixed Column 2</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example combines stacked, horizontal, and mixed layouts for various screen sizes, showcasing the flexibility of the Bootstrap grid system.

Key Takeaways

  • Columns stack vertically by default, creating a stacked layout on smaller screens.
  • Use responsive classes like .col-* to ensure horizontal alignment on larger screens.
  • Combine different column spans for mixed layouts that adapt to screen size.
Prev Next