How to Use Bootstrap Col-SM Classes in Your Layouts Correctly

As we learned about using Bootstrap utility classes, we discussed ones used for sizing. In this chapter, you will get familiar with Bootstrap Col-SM – the small classes you may use when creating Bootstrap layouts.

They are used for screens that are still considered little but are more than 576 pixels in width. In most cases, it will be a cellphone screen. Most of us use our phones to browse every day. Therefore, Bootstrap small responsive classes are vital for any website to gain popularity.

To continue learning and find our more about medium classes (for screens wider than 768 pixels), visit our next lesson. Also, don't forget you can always revisit our guide on extra small classes for screens that are narrower than 576 pixels.

Bootstrap Col-SM: Main Tips

• Bootstrap 4 grid system offers a set of responsive classes to specify on what screens a certain layout works.
• Bootstrap Col-SM (small) classes applies a grid column class to an element when the screen is wider than 576px.
• You can add them to your layouts by typing col-sm-*.

Using Small Grid

Bootstrap small grid column classes apply when the screen is wider than 576px and collapses otherwise:

Columns like the ones above are created by using the class prefix .col-sm-*:

<div class="container">
  <div class="row">
    <div class="bg-info col-sm-4">
      ...
    </div>
    <div class="bg-primary col-sm-8">
      ...
    </div>
  </div>
</div>

Auto Layout

By skipping the number for column containers inside a row container (only typing col-sm), you can create auto layouts. If you do this, it will automatically be determined how many columns each column element should span. All of them will have the same width and together occupy the whole available width.

See an example below to get a better idea:

<div class="row">
<!-- Five 20% wide columns --> 
  <div class="bg-primary col-sm">1</div>
  <div class="bg-secondary col-sm">2</div>
  <div class="bg-primary col-sm">3</div>
  <div class="bg-secondary col-sm">4</div>
  <div class="bg-primary col-sm">5</div>
</div>

Bootstrap Col-SM: Summary

• Using the Bootstrap grid system, you can use a set of responsive classes that specify what screens a certain layout works on.
• Bootstrap small class applies when the screen is wider than 576px.
• Applying Bootstrap Col-SM class without defining the number of columns creates an auto layout.