Code has been added to clipboard!

Bootstrap Col-XS: Mastering Bootstrap Extra Small Grid

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

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-*:

col-xs-4
col-xs-8

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:

Example
<div class="container">
  <div class="row">
    <div class="bg-info col-xs-4">
      ...
    </div>
    <div class="bg-primary col-xs-8">
      ...
    </div>
  </div>
</div>
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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • 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:

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

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 05/03/2021
3176 People Used
Only 97 Left
Rating
5.0