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 = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" > </ 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;" > Beginner </ div > </ div > </ div > </ body > </ html > |
Output:
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 = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" > </ 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;" > forBeginner </ div > </ div > </ div > </ body > </ html > |
Output:
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.
Contact Us