Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div>
        <div class="row" style="font-size: 50px; color: white;">
            <div class="col-xs-4" style="background-color: green;">
                <!-- use of xs-grid class -->
                Geek
            </div>
            <div class="col-xs-4" style="color: black;">
                for
            </div>
            <div class="col-xs-4" style="background-color: green;">
                Geeks
            </div>
        </div>
    </div>
</body>
  
</html>


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.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div>
        <div class="row" style="font-size: 50px; color: white;">
            <div class="col-xs-6" style="background-color: green;">
                <!-- use of xs-grid class -->
                Geek
            </div>
            <div class="col-xs-6" style="color: black;">
                forGeeks
            </div>
        </div>
    </div>
</body>
  
</html>


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.



Last Updated : 28 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads