🔥 $100K Hit! Where Will Bitcoin Go Next? Find Out Live!

Code has been added to clipboard!

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

Reading time 2 min
Published Nov 21, 2017
Updated Oct 2, 2019

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:

col-sm-3
col-sm-6

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

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

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

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:

Example
<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.