Bootstrap 5 Breakpoints Min-width
Last Updated :
21 Dec, 2022
For Min-Width breakpoints, CSS would only be applied for devices larger than min-width. There are media queries and mixins for targeting segments of screen sizes using the minimum and maximum breakpoint widths. We use xs, md, lg, xl, xxl for various viewport sizes.
There is no need for media query for xs breakpoint because it is effective (min-width:0).
- @include media-breakpoint-up( sm ) { … } – It means that the min-width is sm and the same CSS would be applied for devices larger than the min-width.
Syntax:
@include media-breakpoint-up(sm) { ... }
Example 1: Use the Min-width breakpoint to change the display from none to block.
SCSS
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
|
CSS
.custom-class {
display: none;
}
@media (min-width: 576px) {
.custom-class {
display: block;
}
}
|
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=
rel="stylesheet">
<style>
.custom-class {
display: none;
}
@media (min-width: 576px){
.custom-class {
display: block;
}
}
</style>
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap5 Breakpoints Min-width
</h2>
<br>
<div class="custom-class">
<h5>
This block is not visible for sm
breakpoint but visible for other
breakpoints
</h5>
</div>
</div>
</body>
</html>
|
Output:
Example 2: Use the Min-width breakpoint to change the color of the paragraph with changing sizes of viewports.
SCSS
.custom-class {
color: green;
}
@include media-breakpoint-up(sm) {
.custom-class {
color: blue;
}
}
@include media-breakpoint-up(lg) {
.custom-class {
color: red;
}
}
|
CSS
.custom-class {
color: green;
}
@media (min-width: 576px) {
.custom-class {
color: blue;
}
}
@media (min-width: 992px) {
.custom-class {
color: red;
}
}
|
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Bootstrap5 Breakpoints Min-width</title>
<link href=
rel="stylesheet">
<style>
.custom-class {
color: green;
}
@media (min-width: 576px) {
.custom-class {
color: blue;
}
}
@media (min-width: 992px) {
.custom-class {
color: red;
}
}
</style>
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap5 Breakpoints Min-width
</h2>
<br>
<h5>Java</h5>
<div class="custom-class">
<p>
Java has been one of the most popular programming
languages for many years. Java is Object Oriented.
However, it is not considered as pure object-oriented
as it provides support for primitive data
types (like int, char, etc)
</p>
</div>
</div>
</body>
</html>
|
Output:
References: https://getbootstrap.com/docs/5.0/layout/breakpoints/#min-width
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...