By now, you are familiar with using a grid system and utility classes. Therefore, our next tutorial should seem easy: we will introduce responsive classes that you can use in your grids.
Bootstrap Col-XS classes are applied in the cases of devices with tiny screens - no more than 576 pixels in width. In most cases, it is a rather simple phone.
Bootstrap Col-XS: Main Tips
- Bootstrap 4 grid system offers a set of responsive classes to specify on what screens a certain layout works.
- The Bootstrap Col-XS (extra small) class applies a grid column class to an element when the screen is narrower than 576px.
- It is created by using Bootstrap
col-xs-*
in your code.
XS Grid
The Bootstrap extra small (col-xs
) column classes apply when the screen is narrower than 576px.
Columns like the ones you see below are created by using the class prefix .col-xs-*:
Now, here we have an HTML example that creates a simple layout which applies to any screen size and looks like the one displayed above:
<div class="container">
<div class="row">
<div class="bg-info col-xs-4">
...
</div>
<div class="bg-primary col-xs-8">
...
</div>
</div>
</div>

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion

- Easy to navigate
- No technical issues
- Seems to care about its users
- Huge variety of courses
- 30-day refund policy
- Free certificates of completion

- Great user experience
- Offers quality content
- Very transparent with their pricing
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
Auto Layout
Using Bootstrap 4 grid system, you can also create auto layouts. They are made by not specifying how many columns a grid column should span (skipping the number for all column containers inside a row container).
When you do this, Bootstrap 4 automatically determines how many columns each column element should span through for all of them to be equal and span through the whole available width together:
<div class="row">
<!-- Five 20% wide columns -->
<div class="bg-primary col">1</div>
<div class="bg-secondary col">2</div>
<div class="bg-primary col">3</div>
<div class="bg-secondary col">4</div>
<div class="bg-primary col">5</div>
</div>
Bootstrap Col-XS: Summary
- The responsive classes are used in the grid system to specify the size of the screen that a certain layout works on.
- Bootstrap extra small, or Col-XS class applies a grid column class to an element when the user is not using a screen that is wider than 576px.