Bootstrap Grid – Small Devices

Bootstrap Grid – Small Devices

Bootstrap provides responsive column classes to control how content displays on small devices such as portrait tablets and large smartphones.

Small devices use the class prefix:

col-sm-*

▶ Applies to screens ≥ 576px wide

If the screen width is below 576px, the columns will stack vertically (full width) by default.

📌 Basic Example: Equal Columns on Small Devices

📱 Phones (<576px) → Columns stack:

Column 1
Column 2
Column 3

🖥️ Devices ≥576px (small and up) → Columns appear horizontal:

Column 1 | Column 2 | Column 3

📌 Two Columns Layout Example

✔ Creates a 50/50 layout on small screens and above
✔ Full width stacked on extra small screens

📌 Mixed Width Columns

📌 Automatically Full Width on Smaller Devices

Using only col-sm-* means you do not need to define col-12 for extra-small screens — Bootstrap automatically stacks them.

🧱 Small Devices Grid Summary

Class Screen Size Behavior
.col-sm-* ≥576px Horizontal layout
Undefined (below 576px) <576px Stacked (full width)

🎯 Why Use col-sm-*?

  • Ensures layout becomes organized on tablets

  • Improves mobile usability

  • Reduces code repetition with automatic stacking

You may also like...