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 write the bootstrap media queries for very large screens?
Bootstrap, is a CSS framework that can be used to style your web pages without even writing the CSS code in an external file. It is an open source framework that is available for free. You just need to include the CSS and the JavaScript CDN of this framework to use the dynamic and interactive components which are already built in this framework.
There are some classes define in this framework that you can use to style the elements of your web page. In this article, we are going to learn about writing the bootstrap media queries for very large screen devices such as desktops or curved screens.
Bootstrap media query classes
Sr.No. |
Class |
Description |
Min-width (px) |
|---|---|---|---|
1 |
.xs |
This class is defined for extra small devices like small mobile devices. |
<576px |
2 |
.sm |
It is defined for small screen width devices like mobile. |
>=576px |
3 |
.md |
This class defines width for medium screen devices like iPad, tablet etc. |
>=768px |
4 |
.lg |
It is used for larger screen devices like desktop. |
>=992px |
5 |
.xl |
This class can be used for very large or extra-large screen devices like curved screen desktops. |
>=1200px |
As you can see from above table the extra-large or the very large devices are those whose screen width is greater than or equal to 1200px and we are going to write bootstrap media queries for these devices only in this article.
Let us now understand the practical implementation of these classes in details with help of code examples −
Steps
Step 1 − In the first step, we will include the Bootstrap CSS as well as Bootstrap script CDN to our document to use bootstrap classes.
Step 2 − In the next step, we will define some regular HTML elements to make changes in them once the screen device changes to very large.
Step 3 − In the last step, we will write our own CSS for the very large screen devices and see the changes on screen when the viewport width goes above 1200px.
Example
The below example will illustrate how you can write your own bootstrap media query class CSS to define your styles −
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet">
<style>
body{
background-color: bisque;
}
@media screen and (min-width: 1200px) {
body{
background-color: aqua;
}
.result{
color: red;
}
}
</style>
</head>
<body>
<div class = "container text-center">
<h2 class = "display-4">Writing the bootstrap media queries for very large screens </h2><br/>
<p class = "lead"> <b>The background color of body and the text color of below text will change for extra large screen width devices.</b></p>
<br/>
<p class = "lead result">The text color of this text will change to red for very large screen devices and remains black for smaller ones.</p>
</div>
<!-- bootstrap JavaScript cdn -->
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script>
</body>
</html>
In the above example, we have used our own CSS styles inside the media query without using the bootstrap media classes. The background color of body will change from bisque to aqua and the text color of below paragraph tag will change from black to red for larger screen devices.
Let us now see one more code example in which we will change the width of the containers present on the web page for different screen devices.
Algorithm
The algorithm of the above example and this example is almost same. You just need to add some extra CSS to change the width for different screen devices.
Example
The below example will explain how you can change the width of any container or element on the web page for different media devices −
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet">
<style>
body{
background-color: bisque;
}
@media screen and (min-width: 1200px) {
body{
background-color: aqua;
}
.container{
width: 50%;
}
.result{
color: red;
}
}
</style>
</head>
<body>
<div class = "container text-center">
<h2 class = "display-4">Writing the bootstrap media queries for very large screens </h2> <br/>
<p class = "lead"> <b>The background color of body and the text color of below text will change for extra large screen width devices. </b></p>
<br/>
<p class = "lead result">The text color of this text will change to red for very large screen devices and remains black for smaller ones.</p>
</div>
<!-- bootstrap JavaScript cdn -->
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
In the above example, we have used the CSS media query to define our own styles for devices with width greater than or equal to 1200px. We have changed the width of the container for the very large screen devices to 50%.
Conclusion
In this article, we have learned about writing the bootstrap media query for very large screen devices. We have seen and understand it in details by implementing it practically inside the two different code examples.
34 Views
