Bootstrap 5 Approach Responsive
Bootstrap 5 responsive approach ensures web page visibility across devices. Media queries, such as min-width and occasionally max-width, are used to address responsiveness. Efforts are made to minimize reliance on media queries while accommodating complex component needs.
Bootstrap 5 Approach Responsive:
Mixin | Description |
---|---|
@include media-breakpoint-only(md) { … } | Executes code only when the screen size is ‘md’. |
@include media-breakpoint-between(md, xl) { … } | Executes code when the screen size is between ‘md’ and ‘xl’. |
Syntax:
// Min-width
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
// Max-width
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
// Single-breakpoint
@include media-breakpoint-only(xxl) { ... }
// Between-breakpoint
@include media-breakpoint-between(md, xl) { ... }
Example 1: In this example we Bootstrap 5’s responsive approach using a media query to change text color within a container for viewport widths between 768px and 991.98px.
<!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"
/>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>
Bootstrap 5 Approach Responsive
</title>
<style>
@media (min-width: 768px) and (max-width: 991.98px) {
.container {
color: blue;
}
}
</style>
</head>
<body>
<div class="text-center">
<h2>
Bootstrap 5 Approach Responsive
</h2>
<p class="container">
w3wiki is a great platform
to learn various skills like
HTML,CSS,Javascript and many more.
</p>
</div>
</body>
</html>
Output :
Example 2: In this example we demonstrates Bootstrap 5’s responsive approach using media queries to change text color within a container for different viewport widths: blue for 768px to 991.98px and green for 991.98px to 1199.98px.
<!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"
/>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>
Bootstrap 5 Approach Responsive
</title>
<style>
@media (min-width: 768px) and (max-width: 991.98px) {
.container {
color: blue;
}
}
@media (min-width: 991.98px) and (max-width: 1199.98px) {
.container {
color: green;
}
}
</style>
</head>
<body>
<div class="text-center">
<h2>
Bootstrap 5 Approach Responsive
</h2>
<p class="container">
w3wiki is a great platform
to learn various skills like
HTML,CSS,Javascript and many more.
</p>
</div>
</body>
</html>
Output: