What is the function of the xs grid class in Bootstrap ?

Bootstrap is a popular framework for developing mobile-first websites. This framework has a variety of classes that can be used to build a responsive website using a mobile-first approach. This framework has a grid system that allows us to generate grids in a row while building a website. We can create 12 columns in a row and combine them to produce a broader column.

To learn about the grid system of Bootstrap, you can click here. The article focuses on the Bootstrap-3 col-xs grid class.

Grid Classes: The bootstrap-3 grid system has four classes, which are mentioned below:

1. col-xs  This class is used for devices with extra-small screen sizes, such as phones, whose width is less than 768px ( <768px).
2. col-sm This class is used for devices with small screen sizes, such as tables, whose width is more than 768px and less than 992px ( ≥768px and <992px ).
3. col-md : This class is used for devices with medium screen sizes screen, such as desktops, whose width is more than 992px and less than 1200px ( ≥992px and <1200px ).
4. col-lg : This class is used for devices with large screen sizes screen, such as large screen desktop, whose width is more than 1200px ( ≥1200px ).

Components of a grid system: Some of the components of the grid system are:

1. container: This is a Bootstrap class that is used to construct a container to enclose the contents of the website in a grid format.
2. row: This is a Bootstrap class that allows us to build a row in the container to wrap the column in a row.
3. column: This Bootstrap class allows us to construct a column in a row, and we can use it to create up to 12 columns in a row or combine them to make broader columns.

.xs-grid class: The bootstrap-3 grid system provides this class, which allows us to design a user interface for devices whose screen sizes is less than 768px.

Syntax: 

<div class="col-xs-k">Example for xs-grid class. </div>

• col used for creating a column in the row
• xs specifies that this class is applied only for extra small screens
• k denotes the columns used from 12 columns of the row.

Properties:

• This class is suitable for screens with a width of less than 768px ( <768px ).
• To use this class, we must include the prefix “col-xs-” in the class.
• The width of the container can be none (auto).
• The grid behavior of this class is always horizontal.

Example 1: Using col-xs-4

The following code demonstrates the use of col-xs-4, which takes up 1/3 of the screen when the screen width is less than 768px.

Output:

Output represent the row divided into 3 part using col-xs-4 with screen width 702px < 768px

Example 2: Using col-xs-6

The following code demonstrates the use of col-xs-6, which takes up 50% of the screen when the screen width is less than 768px.

Output:

Output represent the row divided into 2 part using col-xs-6 with screen width 702px < 768px

In bootstrap-4 and bootstrap-5, the col-xs class has been removed and replaced with col. For example:

• col-xs-5 in Bootstrap-3.
• col-5 in Bootstrap-4 or -5.

Web browser used: 

• Chrome

Reference: Click here to learn more about Bootstrap.

GeeksforGeeks

Improve

Article Tags :

• Bootstrap
• Web Technologies
• Bootstrap-Questions