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:
- col-xs This class is used for devices with extra-small screen sizes, such as phones, whose width is less than 768px ( <768px).
- 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 ).
- 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 ).
- 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:
- container: This is a Bootstrap class that is used to construct a container to enclose the contents of the website in a grid format.
- row: This is a Bootstrap class that allows us to build a row in the container to wrap the column in a row.
- 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;" >
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;" >
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:
Reference: Click here to learn more about Bootstrap.
Last Updated :
28 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...