Bootstrap 5 Grid: Small Breakpoint (sm)

Bootstrap 5’s grid system is designed to build responsive, mobile-first layouts, and the small (sm) breakpoint is a key part of that system. The sm breakpoint allows you to define layout behaviors for devices with widths 576px and above. It’s perfect for creating layouts optimized for smartphones in landscape mode and small tablets.

In this tutorial, we’ll dive deep into how to use the small breakpoint (sm) in Bootstrap 5, with practical examples and tips to build responsive websites.

What is the Small Breakpoint in Bootstrap 5?

The small (sm) breakpoint is a responsive threshold in Bootstrap’s grid system that targets screen widths 576px and larger. Layout behaviors defined using sm classes will only take effect on screens that meet this width requirement.

Key Features of the sm Breakpoint:

  1. Targets screens ≥576px.
  2. Layouts smaller than 576px will use the default (stacked) behavior unless overridden.
  3. Can be combined with larger breakpoints (md, lg, etc.) for more control.

How to Use the Small Breakpoint (sm)

To define responsive behavior for the sm breakpoint, use classes like .col-sm-*. This allows you to control how columns behave on screens 576px and above.

Basic Example

<div class="container">
  <div class="row">
    <div class="col-sm-6 bg-primary text-white text-center p-3">Column 1</div>
    <div class="col-sm-6 bg-secondary text-white text-center p-3">Column 2</div>
  </div>
</div>

Explanation:

  • Default (smaller than 576px): Columns stack vertically.
  • 576px and above: Columns align horizontally, each taking 50% of the width.

Small Breakpoint and Column Widths

You can use the .col-sm-* classes to control the width of columns at the sm breakpoint. The * represents the number of grid columns out of 12.

Example: Custom Column Widths

<div class="container">
  <div class="row">
    <div class="col-sm-4 bg-info text-white text-center p-3">Column 1</div>
    <div class="col-sm-8 bg-warning text-dark text-center p-3">Column 2</div>
  </div>
</div>

Explanation:

  • col-sm-4: Column 1 takes 4/12 of the row width (33.33%) on screens 576px and above.
  • col-sm-8: Column 2 takes 8/12 of the row width (66.66%) on screens 576px and above.
  • On screens smaller than 576px, both columns stack vertically.

Combining Small with Other Breakpoints

Bootstrap’s grid system is designed to be responsive across multiple breakpoints. You can combine the sm breakpoint with larger breakpoints (md, lg, etc.) for precise control.

Example: Responsive Layout with Multiple Breakpoints

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

Explanation:

  • col-12: Columns stack vertically on screens smaller than 576px.
  • col-sm-6: Each column takes half the row width (50%) on screens 576px and above.
  • col-md-4 and col-md-8: Columns adjust to 4/12 and 8/12 widths on screens 768px and above.

Centering Content with the Small Breakpoint

Bootstrap provides utility classes to center content within the grid, which is particularly useful for sm layouts.

Example: Centering Columns

<div class="container">
  <div class="row justify-content-center">
    <div class="col-sm-6 bg-light text-dark text-center p-3">Centered Column</div>
  </div>
</div>

Key Classes:

  • justify-content-center: Centers the column horizontally within the row.

Adding Spacing to Small Grids

Bootstrap 5 makes it easy to add spacing between columns using gutters.

Example: Adding Gutters

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

Explanation:

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

Hiding and Showing Content on Small Screens

Bootstrap’s visibility utilities let you hide or display content based on the sm breakpoint.

Example: Hiding Content on Small Screens

<div class="container">
  <div class="row">
    <div class="col d-none d-sm-block bg-primary text-white p-3">Visible on Small Screens and Above</div>
    <div class="col bg-secondary text-white p-3">Visible on All Screens</div>
  </div>
</div>

Key Classes:

  • d-none: Hides the element by default.
  • d-sm-block: Displays the element only on screens 576px and above.

Use Cases for the Small Breakpoint

The small breakpoint is ideal for layouts targeting small tablets and landscape smartphones. Here are some examples:

  1. Two-Column Layouts: Display columns side-by-side on small screens.
  2. Forms: Stack form fields vertically on smaller screens and align horizontally on larger screens.
  3. Navigation Menus: Use responsive menus that adjust based on screen size.

FAQs About Bootstrap 5 Small Breakpoint

1. What happens if I don’t use sm classes?

If no sm classes are applied, the default behavior (xs) is used, stacking columns vertically on smaller screens.

2. Can I use sm classes with larger breakpoints?

Yes, combining sm with other breakpoints like md or lg allows you to create more responsive layouts.

3. How do I make columns equal in height at the sm breakpoint?

Use .h-100 or flexbox utilities like .align-items-stretch to make columns equal in height.

Conclusion

The small (sm) breakpoint in Bootstrap 5 provides flexibility for layouts targeting screens 576px and above. By mastering the sm classes and combining them with other breakpoints, you can build responsive and user-friendly designs for small tablets and smartphones.

Leave a Comment