Bootstrap Media Queries
Posted by Superadmin on April 30 2023 16:45:17

Bootstrap Media Queries

Bootstrap Media Queries

Introduction to  Bootstrap Media Queries

The media queries in bootstrap are a way of making a responsive web application. It is used for different devices with different styles. It is used to create breakpoints for web application layout. The breakpoint helps to measure the viewport width of devices and apply them to the web application. It used in components, the layout of the application and the grid system.

Syntax

The media queries syntax is used for many purposes.

The below tag is the syntax of media queries in bootstrap.

@media

All syntaxes are below according to size or breakpoint.

1. Small Devices

The below syntax used for Phone devices or 576px and above screen width devices.

@media (min – width: 576px) {
Web design tag
}

2. Media Devices

The below syntax used for Tablet device or 768px and above screen width devices.

@media (min – width: 768px) {
Web design tag
}

3. Large Devices

The below syntax used for Laptop and Desktop devices and 992px and above screen width devices.

@media (min – width: 992px) {
Web design tag
}

4. Extra Large Devices

The below syntax used for Large Desktop devices and 1200px and above screen width devices.

@media (min – width: 1200px) {
Web design tag
}

How Bootstrap Media Queries Works?

The media queries used for the breakpoint to make a responsive web application. Either minimum width or maximum width needed for breakpoint setup in web application.

The media queries used inside of the style tag. All CSS tags write under the media queries according to requirements. The breakpoint media queries are working below.

<!DOCTYPE>
<html>
<head>
<style>
@media(min-width: 576px) {
p {
background-color: orange;
color: black;
}
}
@media (min-width: 1200px) {
p {
background-color: Yellow;
color: black;
}
}
</style>
</head>
<body>
<p>The bootstrap media queries used in components, the layout of the application and the grid system. <br></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.col-3 {width: 25%;}
.col-6 {width: 50%;}
.col-9 {width: 75%;}
@media only screen and (max-width: 768px) {
[class*="col-"] {
width: 90%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-3 menu">
<ul>
<li> media queries break point </li>
<li> media queries column </li>
</ul>
</div>
<div class="col-6">
<p>The bootstrap media queries used for different devices with a different style.
</p>
</div>
</div>
</body>
</html>

Examples

Here are the following examples mention below

Example #1

This is used for the breakpoint to make responsive web applications.

The breakpoint can make using the standard width of the device or according to the requirement of the application.

Code:

<!DOCTYPE html>
<html>
<head>
<meta name ="viewport" content ="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
@media(min-width: 576px) {
p {
background-color: orange;
color: black;
}
}
@media (min-width: 1200px) {
p {
background-color: Yellow;
color: black;
}
}
</style>
</head>
<body>
<p>
The media queries in bootstrap are a way of making a responsive web application. <br>
The bootstrap media queries used for different devices with a different style. <br>
It is used to create breakpoints for web application layout. <br>
The breakpoint helps to measure the viewport width of devices and apply them to the web application. <br>
The bootstrap media queries used in components, the layout of the application and the grid system. <br>
</p>
</body>
</html>

The output of the small screen

Bootstrap Media queries output 1

The output of the large screen

Bootstrap Media queries output 2

Example #2

The column media queries used for the grid system. The column of div tag can style with media queries.

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet"     href=   "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>
<script
src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: grey;
color: white;
}
.col-3 {width: 25%;}
.col-6 {width: 50%;}
.col-9 {width: 75%;}
@media only screen and (max-width: 768px) {
[class*="col-"] {
width: 90%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-3 menu">
<ul>
<li> media queries break point </li>
<li> media queries column </li>
<li> media queries landscape </li>
<li> media queries layout </li>
</ul>
</div>
<div class="col-6">
<h1>The City</h1>
<p> The media queries in bootstrap are a way of making a responsive web application. <br>
The bootstrap media queries used for different devices with a different style. <br>
It is used to create breakpoints for web application layout. <br>
The breakpoint helps to measure the viewport width of devices and apply them to the web application. <br>
The bootstrap media queries used in components, the layout of the application and the grid system. <br>
</p>
</div>
</body>
</html>

The output of the small screen

Bootstrap Media queries output 3

The output of the large screen

output 4

Example #3

The element hides using media queries.

If the minimum width of the screen is 576px then the respective element is hidden.

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
div.quer  {
background-color: orange;
padding: 15px;
}
@media (max-width: 576px) {
div.quer {
display: none;
}
}
</style>
</head>
<body>
<h2> Hide elements Using media queries </h2>
<div class="quer"> Bootstrap Media Queries </div>
<p>
The media queries in bootstrap are a way of making a responsive web application. <br>
The bootstrap media queries used for different devices with a different style. <br>
It is used to create breakpoints for web application layout. <br>
The breakpoint helps to measure the viewport width of devices and apply them to the web application. <br>
The bootstrap media queries used in components, the layout of the application and the grid system. <br>
</p>
</body>
</html>

The Original Output

output 5

Media Queries Output

output 6

Conclusion

Bootstrap Media queries are an effective way to layout and responsive web applications. It is used for different style sheets for a different screen width of many devices. This help to make elegant or animated web applications.