Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use grid-breakpoint class in Bootstrap?
The grid breakpoint classes are the basic building blocks of creating a responsive web design using Bootstrap. These classes can be used with any bootstrap class to specify a particular CSS to an HTML element in the document for different screen sizes or different display devices. We can hide or show, change the position and alignment of an element in different screen size devices using these classes. These classes are built using the Media Query in CSS which is used for creating the responsive web designs for different display devices.
The grid-breakpoint classes in bootstrap that can be used to build a responsive web design are listed below −
xs − The 'xs' in this class is stands for the Extra Small, which means this class will define the particular styles for only extra small screen width devices.
sm − The 'sm', as the name suggests stands for the small devices and it will define styles for the small screen width devices.
md − 'md' is the abbreviation used for the medium and it defines the styles for the medium screen size devices.
lg − The 'lg' in this class is used for the large and as the abbreviation defines it will apply the defined styles for the large screen devices.
xl − 'xl' is the most commonly used abbreviation for extra small which represents the very large objects. Similarly, it is used for the extra large screen devices to apply the styles.
xxl − As xl stands for extra large, similarly xxl stands for extra extra large that means for a very large screen devices like: for curved screens and big PC screens.
These breakpoint classes can be used with any bootstrap class to apply the styles of that particular class to an element for a particular screen size and not on any other screen size or some other styles on other screen devices.
Syntax
The below syntax will show you how you can use the bootstrap grid – breakpoint classes with different other classes of bootstrap −
<div class = "[any_Bootstrap_Classname] – [breakpoint class]"> </div>
The below table will show you the minimum screen width for each of these classes to apply styles on an element and some example use cases of these classes −
Screen Width |
Examples |
|
|---|---|---|
xs |
< 576px |
col – 6 |
sm |
>= 576px |
px - sm – 3 |
md |
>= 768px |
my - md – 2 |
lg |
>= 992px |
d – lg – none |
xl |
>= 1200px |
col - xl – 6 |
xxl |
>= 1400px |
d - xxl - flex |
Let us now discuss and understand it by practically implementing with the help of code examples.
Steps
Step 1 − In the first step, we will include the bootstrap to our HTML document using the CDN or by downloading it from official website.
Step 2 − In the next step, we will define some HTML elements to implement the bootstrap classes on those elements.
Step 3 − In this step, we will assign the different bootstrap classes with the breakpoint classes to the elements defined in the previous step and make changes in their styles according to different screen width devices.
Example
The below code example will explain how to use the breakpoint classes with different bootstrap classes to change CSS for different screen sizes −
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet" ></head>
<body>
<h2> Use grid-breakpoint class in Bootstrap </h2>
<p> The size of each column in a particular row will change according to the device width. </p>
<div class = "row">
<div class = "col-12 col-md-6 col-lg-4"> Column - 01 </div>
<div class = "col-12 col-md-6 col-lg-4"> Column - 02 </div>
<div class = "col-12 col-md-6 col-lg-4"> Column - 03 </div>
<div class = "col-12 col-md-6 col-lg-4"> Column - 04 </div>
<div class = "col-12 col-md-6 col-lg-4"> Column - 05 </div>
<div class = "col-12 col-md-6 col-lg-4"> Column - 06 </div>
</div>
</body>
</html>
In the above example, we have seen the use of the bootstrap breakpoint classes with the Bootstrap Grid System Classes row and col to change the width of the columns for different screen size devices. So that, they can be visible in a good way not oddly.
Let us see one more code example, in which we will use the bootstrap breakpoint classes with some more bootstrap classes other than grid system classes.
Example
The example below will illustrate the use of the bootstrap breakpoint classes with the display classes of the bootstrap −
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet"></head>
<body>
<h2> Using grid-breakpoint class in Bootstrap </h2>
<p> The size of each column in a particular row will change according to the device width. </p>
<div class = "row">
<div class = "d-none text-center border mx-0 border-dark d-md-block d-lg-float">
Display None in extra small screen devices
</div>
<div class = "d-block text-center border mx-0 border-dark d-md-none col-lg-4">
Display None in small, medium, large, extra large and extra extra large screen devices
</div>
<div class = "text-center border mx-0 border-dark d-lg-none">
Display None in large, extra large and extra extra large screen devices
</div>
</div>
</body>
</html>
In the above example, we have used the bootstrap breakpoint classes with the bootstrap display classes and change the display property of different HTML elements for different screen width devices.
In this article, we have learned about the use of the bootstrap grid-breakpoint classes and see their practical implementation with different other bootstrap classes to change their properties with respect to the screen width. We have discussed, how we can use these classes with different other classes with help of code examples. In this way we can use the bootstrap grid-breakpoint classes with any other bootstrap class to apply styles according to the screen width of the devices.
40 Views
