Bootstrap 4 Grid Small (sm)

Welcome to The Coding College! In this tutorial, we’ll focus on the small grid (sm) breakpoint in Bootstrap 4. The sm breakpoint is crucial for building responsive layouts that adapt to devices with a minimum width of 576px, such as small tablets or landscape mobile devices.

What is the Small Grid (sm)?

The small grid (sm) in Bootstrap 4 is part of the grid system used for creating responsive layouts. It kicks in when the viewport width is 576px or larger. This means you can define how elements are displayed for small screens while maintaining separate behaviors for smaller (xs) or larger (md, lg, etc.) screens.

Key Features of the sm Grid:

  1. Breakpoint Start: Activates at a minimum width of 576px.
  2. Stacking Behavior: Content stacks vertically on screens smaller than 576px.
  3. Responsive Design: Allows you to define layouts specific to small devices, independent of larger breakpoints.
  4. Flexible: Combines seamlessly with other breakpoints (xs, md, lg, etc.).

Grid Class Syntax

To use the sm breakpoint, apply the class col-sm-* in your grid:

<div class="row">
  <div class="col-sm-*">Column Content</div>
</div>

Example:

<div class="container">
  <div class="row">
    <div class="col-sm-6">Column 1</div>
    <div class="col-sm-6">Column 2</div>
  </div>
</div>
  • On small screens (≥576px): Columns are displayed side by side, each taking 50% width.
  • On extra small screens (<576px): Columns stack vertically.

Example 1: Two Equal Columns

Here’s an example with two equal columns for small screens:

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

Behavior:

  • Small screens (≥576px): Columns are side by side, each taking half the row width.
  • Extra small screens (<576px): Columns stack vertically and take full width.

Example 2: Custom Column Sizes

You can customize the column widths for small screens using col-sm-*:

<div class="container">
  <div class="row">
    <div class="col-sm-4">Column 1 (4/12)</div>
    <div class="col-sm-8">Column 2 (8/12)</div>
  </div>
</div>

Behavior:

  • Small screens (≥576px):
    • Column 1 takes 4/12 of the width.
    • Column 2 takes 8/12 of the width.
  • Extra small screens (<576px): Both columns stack vertically and take full width.

Example 3: Three Columns

Here’s a layout with three equal-width columns for small screens:

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

Behavior:

  • Small screens (≥576px): Columns are aligned horizontally, each taking 1/3 of the row width.
  • Extra small screens (<576px): Columns stack vertically.

Example 4: Mixed Breakpoints

Combine sm with other breakpoints for advanced layouts:

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

Behavior:

  • Extra small screens (<576px): All columns stack vertically (col-12).
  • Small screens (≥576px):
    • Columns 1 and 2 are side by side (col-sm-6).
    • Column 3 takes full width.
  • Medium screens (≥768px): All three columns align horizontally with equal widths (col-md-4).

Example 5: Full-Width Layout with container-fluid

To make the grid span the full width of the viewport, use container-fluid:

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

Example 6: Nested Grids

You can create complex layouts by nesting rows and columns inside a col-sm-*:

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

Using Alignment Utilities

Bootstrap’s flex utilities allow you to align content within the sm grid:

<div class="container">
  <div class="row align-items-center">
    <div class="col-sm-6">Vertically Aligned Column</div>
    <div class="col-sm-6">Another Column</div>
  </div>
</div>

Practical Use Case: Small Screen Card Layout

Here’s a practical example of using the sm grid for a responsive card layout:

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Tips for Using the sm Grid

  1. Mobile-First Approach: Always start designing for smaller screens and scale up.
  2. Test Across Devices: Ensure layouts look great on both mobile and tablet screens.
  3. Combine Utilities: Use spacing (p-*, m-*) and alignment utilities for finer control.
  4. Mix Breakpoints: Combine sm with other breakpoints (md, lg) for highly responsive designs.

Conclusion

The small grid (sm) in Bootstrap 4 is a powerful tool for building responsive layouts tailored to small screens. By understanding how it interacts with other breakpoints and utilities, you can create adaptable designs that provide a great user experience across devices.

Leave a Comment