Bootstrap 5 Breakpoints Single breakpoint
Last Updated :
16 Dec, 2022
We use media queries to create sensible breakpoints for our interfaces and layouts. There are media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. We use xs, md, lg, xl, xxl for various viewport sizes.
- @include media-breakpoint-only( * ) – It changes the content according to the size given in ( * ) which are various viewport sizes.
Syntax:
// * includes (xs, sm, md, lg, xl, xxl)
@include media-breakpoint-only(*) { ... }
Example 1: To use @include media-breakpoint-only(md) and show how text color changes with the size of the viewport.
SCSS
@import "../node_modules/bootstrap/scss/bootstrap.scss";
.gfg{
@include media-breakpoint-only(md) {
color: red;
}
}
|
CSS
@media (min-width: 768px) and (max-width: 991.98px) {
.gfg {
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>Single breakpoint</title>
<link href=
rel="stylesheet">
<style>
@media (min-width: 768px) and (max-width: 991.98px) {
.gfg {
color: red;
}
}
</style>
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap5 Breakpoints Single breakpoint
</h2>
<br>
<div class="gfg">
<h3>GFG</h3>
</div>
</div>
</body>
</html>
|
Output:
Example 2: To use various mixins and see the changes for different viewports.
SCSS
@import "../node_modules/bootstrap/scss/bootstrap.scss";
.gfg{
@include media-breakpoint-only(xs) {
color: red;
}
@include media-breakpoint-only(lg) {
color: blue;
}
}
|
CSS
@media (max-width: 575.98px) {
.gfg {
color: red;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.gfg {
color: blue;
}
}
|
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>Single breakpoint</title>
<link href=
rel="stylesheet">
<style>
@media (max-width: 575.98px) {
.gfg {
color: red;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.gfg {
color: blue;
}
}
</style>
</head>
<body>
<div class="text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap5 Breakpoints Single breakpoint
</h2>
<br>
<div class="gfg">
<h3>GeeksforGeeks</h3>
<p>
A computer science portal for geeks
</p>
</div>
</div>
</body>
</html>
|
Output:
References: https://getbootstrap.com/docs/5.0/layout/breakpoints/#single-breakpoint
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...