Bootstrap Breakpoints Media queries
Bootstrap Breakpoints utilize media queries to apply CSS styles based on screen size. These breakpoints include min-width, max-width, single breakpoint targeting, and range targeting for various viewport sizes, ensuring responsive design and layout consistency.
| Concept | Description |
|---|---|
| Min-width | CSS applied to devices wider than min-width. |
| Max-width | CSS applied to devices narrower than max-width. |
| Single breakpoint | Targets a single segment of screen sizes using min/max breakpoint widths. |
| Between breakpoints | Targets multiple segments of screen sizes using min/max breakpoint widths. |
| @include media-breakpoint-up(sm) | Applies CSS for devices larger than min-width (sm). |
| @include media-breakpoint-down(sm) | Applies CSS for devices smaller than max-width (sm). |
| @include media-breakpoint-only(*) | Changes content according to specified viewport size. |
| @include media-breakpoint-between(md, xl) | Applies styles for devices between medium (md) and extra large (xl) breakpoints. |
Syntax:
@include media-breakpoint-*(**) { ... }
The ‘*’ is replaced by up, down, only, between for min-width, max-width, single-breakpoint, and between breakpoints respectively.
The ‘**’ is replaced by various viewport sizes like xs, sm, md, lg, xl, xxl.
Example 1: In this example we utilizes Bootstrap’s min-width breakpoint by hiding content on small screens (d-none) and displaying it as a block on screens larger than or equal to sm (d-sm-block).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Bootstrap Min-Width Breakpoint Example</title>
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
/* Custom CSS */
.custom-style {
padding: 20px;
text-align: center;
}
/* Media query for min-width breakpoint */
@media (min-width: 576px) {
.custom-style {
background-color: lightblue;
/* Change background color for larger screens */
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<!-- Content visible on all screen sizes -->
<div class="custom-style">
Content visible on all screen sizes
</div>
</div>
</div>
<div class="row">
<div class="col">
<!-- Content visible on screens larger than or equal to sm (576px) -->
<div class="custom-style d-none d-sm-block">
Content visible only on screens larger than or equal to sm (576px)
</div>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
Bootstrap Breakpoints Media queries Example Output
Example 2: In this example we are showcases Bootstrap 5’s breakpoints and media queries, changing text color based on screen size. The text displays as red for smaller screens (<768px) and blue for larger screens (>=768px).
<!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>Breakpoints Media queries</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
.custom-class {
display: none;
}
@media (max-width: 767.98px) {
.custom-class {
display: block;
color: red;
/* Change text color for smaller screens */
}
}
@media (min-width: 768px) {
.custom-class {
display: block;
color: blue;
/* Change text color for larger screens */
}
}
</style>
</head>
<body>
<div class="text-center">
<h2>
Using Bootstrap 5 Breakpoints and Media Queries
</h2>
<br>
<div class="max-class custom-class">
<h4>
Learn to create responsive websites with Bootstrap 5!
</h4>
</div>
</div>
</body>
</html>
Output:
Bootstrap Breakpoints Media queries