Grid for Extra Small and Small Screens

Grid for Extra Small and Small Screens

Extra small (always stacked or equal)

The .col-* classes without an infix apply at all sizes, including extra small. For example, .col-6 is half width even on tiny phones:

<div class="row">
  <div class="col-6">Always half</div>
  <div class="col-6">Always half</div>
</div>

Small screens (sm, >= 576px)

Use .col-sm-* when you want columns to appear starting at the small breakpoint. Below 576px they stack vertically:

<div class="row">
  <div class="col-sm-3">25% on sm</div>
  <div class="col-sm-3">25% on sm</div>
  <div class="col-sm-3">25% on sm</div>
  <div class="col-sm-3">25% on sm</div>
</div>

Mixing col and col-sm

You can mix auto and numbered classes. Below the breakpoint, plain .col columns share the space equally:

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>

TL;DR

• .col-6 works even on extra small screens.
• .col-sm-* starts at 576px and stacks below.
• Numbers should add up to 12.
• Mixing .col and numbered classes is allowed.