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.

Contents

• 1. Bootstrap Col-SM: Main Tips
• 2. Using Small Grid
• 3. Auto Layout
• 4. Bootstrap Col-SM: Summary

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 Copy <div class="container"> <div class="row"> <div class="bg-info col-sm-4"> ... </div> <div class="bg-primary col-sm-8"> ... </div> </div> </div> Try it Live Learn on Udacity

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

GET 25% OFF 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

UP TO 70% OFF 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

FREE COURSES

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 Copy <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> Try it Live Learn on Udacity

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.