Bootstrap Grid Small (.col-sm-*)

The Small (sm) grid classes in Bootstrap are designed to trigger on screens that are 576px wide or larger. This breakpoint is typically aimed at landscape-oriented smartphones and small tablets.

---

How .col-sm-* Works

When you use the .col-sm-* class, you are telling the browser: "On small screens (576px) and larger, divide the columns exactly this way. On ultra-small portrait phones (less than 576px), disregard this and let them stack vertically."

Example 1: 50% / 50% Split

Here, we use two .col-sm-6 elements inside a row. On screens 576px and above, each takes up exactly half the width. On smaller phones (like an iPhone 13 held vertically), they will stack on top of each other taking 100% width.

<div class="container">
    <div class="row">
        <div class="col-sm-6">I am 50% wide on ≥576px widths.</div>
        <div class="col-sm-6">I am 50% wide on ≥576px widths.</div>
    </div>
</div>

Example 2: 25% / 75% Split

You can mix combinations as long as they sum to 12. Below is an example of a smaller sidebar column merging with a larger main content column on small screens.

<div class="container">
    <div class="row">
        <div class="col-sm-3">Sidebar (3/12 parts)</div>
        <div class="col-sm-9">Main content (9/12 parts)</div>
    </div>
</div>

---

Auto-layout columns (.col-sm)

If you don't care exactly how many parts each column takes, and just want them all to have equal width on small screens and up, you can drop the number entirely and simply use .col-sm.

<div class="container">
    <div class="row">
        <div class="col-sm">Auto-sized</div>
        <div class="col-sm">Auto-sized</div>
        <div class="col-sm">Auto-sized</div>
    </div>
</div>

---

Summary Table

Here is a quick reference summarizing how the 'small' grid class behaves across different screen widths.