Bootstrap Stacked/Horizontal

Bootstrap Grid - Stacked-to-Horizontal

Bootstrap Grid Example: Stacked-to-Horizontal

We’ll create a common grid layout that starts with columns stacked vertically on extra-small devices (like mobile phones) and becomes horizontal on small devices (tablets) and larger.

The following example demonstrates a simple two-column layout using .col-sm-6 for each column. This means each column will take up 6 of the 12 available grid units on small screens and wider, and stack on extra-small screens.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stacked-to-Horizontal Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <h1>Hello World!</h1>
    <div class="row">
      <div class="col-sm-6 p-3 bg-primary-subtle text-primary-emphasis">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="col-sm-6 p-3 bg-secondary-subtle text-secondary-emphasis">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

	Tip: The number in .col-sm-* (e.g., 6 in .col-sm-6) indicates how many columns the div should span out of the 12 available in a row for the ‘sm’ breakpoint and up. Ensure the sum of column numbers in a row adds up to 12 for a full row (or less if you want empty space).

Tip: You can change the fixed-width layout (from .container) to a full-width layout by changing the .container class to .container-fluid:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Full-Width Stacked-to-Horizontal Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container-fluid mt-3">
    <h1>Hello World!</h1>
    <div class="row">
      <div class="col-sm-6 p-3 bg-info-subtle">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="col-sm-6 p-3 bg-warning-subtle">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Note: We used Bootstrap 5 background color utility classes like .bg-primary-subtle and padding utilities like .p-3 for styling, which is a modern best practice instead of inline styles.