Bootstrap 4 Grid

Welcome to The Coding College! In this tutorial, we’ll explore how to create stacked-to-horizontal layouts using Bootstrap 4’s grid system. This feature ensures that your content stacks vertically on smaller screens (like mobile devices) and aligns horizontally on larger screens (like desktops).

What is Stacked-to-Horizontal?

In a stacked-to-horizontal layout, elements are displayed:

  1. Stacked (vertical): On small screens for better readability.
  2. Horizontal (side-by-side): On larger screens to maximize space.

This responsive behavior is achieved using grid classes like .col-*, .col-sm-*, .col-md-*, .col-lg-*, and .col-xl-*.

Basic Syntax

Bootstrap 4’s grid classes determine how columns behave at different breakpoints:

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>
  • On small screens: Columns stack vertically.
  • On medium (≥768px) screens and above: Columns are displayed side-by-side.

Example 1: Stacked-to-Horizontal Grid

Here’s a basic example that transitions from stacked (on mobile) to horizontal (on larger screens):

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6">Left Column</div>
    <div class="col-sm-12 col-md-6">Right Column</div>
  </div>
</div>

How It Works:

  • col-sm-12: Columns take the full width on small screens (<768px).
  • col-md-6: Each column takes half the width on medium screens (≥768px).

Example 2: Three Columns

Let’s create a layout with three columns:

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

Behavior:

  • On small screens: Columns stack vertically (full width).
  • On medium screens (≥768px) and above: Columns are displayed horizontally, each taking 1/3 of the row width.

Example 3: Mixed Column Sizes

You can mix column widths to create dynamic layouts:

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-8">Wide Column</div>
    <div class="col-sm-12 col-md-4">Narrow Column</div>
  </div>
</div>

Behavior:

  • On small screens: Columns stack vertically.
  • On medium screens and above:
    • The first column takes 8/12 of the width.
    • The second column takes 4/12 of the width.

Example 4: Using container-fluid for Full-Width Layouts

To create a stacked-to-horizontal grid that spans the entire width of the viewport, use container-fluid:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-md-6">Full-Width Left Column</div>
    <div class="col-sm-12 col-md-6">Full-Width Right Column</div>
  </div>
</div>

Example 5: Nested Grids

You can create more complex layouts by nesting rows and columns:

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

Behavior:

  • On small screens: All columns (parent and nested) stack vertically.
  • On medium screens:
    • Parent columns are displayed horizontally.
    • Nested columns inside the first parent column are also displayed horizontally.

Stacked-to-Horizontal with Images and Content

Here’s an example combining images and text:

<div class="container">
  <div class="row align-items-center">
    <div class="col-sm-12 col-md-6">
      <img src="https://via.placeholder.com/500" class="img-fluid" alt="Placeholder Image">
    </div>
    <div class="col-sm-12 col-md-6">
      <h2>Responsive Layout</h2>
      <p>This layout stacks on small screens and aligns horizontally on larger devices.</p>
    </div>
  </div>
</div>

Tips for Stacked-to-Horizontal Layouts

  1. Plan Your Breakpoints: Use appropriate grid classes (col-sm-*, col-md-*, etc.) based on your content’s importance.
  2. Test on Multiple Devices: Use browser developer tools to simulate screen sizes.
  3. Spacing and Alignment: Use Bootstrap’s spacing utilities (mb-3, py-4) for proper padding and margin.
  4. Nested Rows: For more complex layouts, nest rows and columns.
  5. Flexbox Utilities: Combine align-items-* and justify-content-* classes to enhance alignment.

Conclusion

The stacked-to-horizontal layout in Bootstrap 4 is a vital feature for creating responsive designs that adapt seamlessly across devices. By mastering the grid system, you can design layouts that are both visually appealing and user-friendly.

Leave a Comment