This chapter will discuss about Bootstrap breakpoints. Bootstrap breakpoints help us determine how a responsive layout is viewed on various devices and viewport sizes.
Basic concepts
- Breakpoints in Bootstrap are used to create responsive designs. You may adjust them at a particular viewport or device size.
- CSS media queries allow us to customize styling based on browsers and operating sytem parameters. Media queries in Boostrap mostly use min-width to control the breakpoints.
- Bootstrap’s goal is mobile-first, responsive designs. Bootstrap creates mobile-friendly layouts with minimal styles, adding layers for larger devices. It improves rendering time and gives users a better viewing experience.
Types of breakpoints
Bootstrap provides six default breakpoints referred to as grid tiers. These can be customized if we use Boostrap’s source Sass files.
| Breakpoint | Class Infix | Dimensions |
|---|---|---|
| Extra small | None | <576px |
| Small | sm | 576px |
| Medium | md | 768px |
| Large | lg | 992px |
| Extra large | xl | 1200px |
| Extra extra large | xxl | 1400px |
These breakpoints cover common device sizes and viewport dimensions. These bootstrap breakpoints can be changed using Sass, as shown below:
$grid-breakpoints: ();xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px
Media queries
Bootstrap is developed to be mobile first, hence media queries are used to create wise breakpoints for its layouts and interfaces. Minimum viewport widths are used to control breakpoints which scale up elements as viewport changes.
Min-width
min-width media feature state specifies the minimum screen width of a specific device. Setting min-width in the breakpoints means CSS is only applied to devices whose width is greater than min-width of the device.
@include media-breakpoint-up(sm) { ... }
The above syntax means that CSS would be applied for devices larger than the min-width i.e Small devices (landscape phones, 576px and up).
Let us see usage of min-width media feature with an example. Here you will see that we apply hide a div on devices width less than 768px.https://www.tutorialspoint.com/bootstrap/examples/breakpoints_min_width.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Breakpoint</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><style> .custom-class {} @media (min-width: 768px) {display: none;@media (min-width: 768px) {.custom-class { display: block; }} </style></head><body><h5>This block is visible on all devices</h5><div class="container-fluid mt-2 "><div class="row"><div class="col-md-6 bg-warning p-3">.custom-class { display: block; }md-6 warning </div></div></div><br><h5>This block is not visible for sm breakpoint but visible for other breakpoints</h5><div class="container-fluid mt-2 custom-class"><div class="row"><div class="col-md-6 bg-warning p-3"> md-6 warning </div></div></div></body></html></pre>Max-width Breakpoint
max-width media feature states the maximum screen width of a specific device. Setting max-width in the breakpoints means CSS is only applied to devices whose width is smaller than mentioned in the media query.
@include media-breakpoint-down(xl) { ... }The above syntax means that CSS would be applied to large devices (desktops, less than 1200px).
Let us see usage of max-width media feature with an example:https://www.tutorialspoint.com/bootstrap/examples/breakpoints_max_width.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Breakpoint</title><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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script><style> .custom-class { display: none; } @media (max-width: 767.98px) { .custom-class {} } </style></head><body><h5>This block visible on all devices</h5><div class="container-fluid mt-2"><div class="row"><div class="col-xxl-3 bg-primary text-black p-3">display: block;xxl-3 primary </div></div></div><h5>This block not visible all devices larger than sm</h5><div class="container-fluid mt-2 custom-class"><div class="row"><div class="col-lg-6 bg-warning text-black p-3"> lg-6 warning </div></div></div></body></html></pre>Single Breakpoint
Single breakpoint means targeting a specific screen sizes using minimum and maximum breakpoint widths in media queries.
@include media-breakpoint-only(md) { ... }The above syntax means that CSS would be applied for devices with screen sizes between @media (min-width: 768px) and (max-width: 991.98px) { ... } (i.e medium sized devices such as tablets, desktops)
Between Breakpoints
Between breakpoints target multiple breakpoints.
@include media-breakpoint-between(md, xl) { ... }Above syntax results in @media (min-width: 892px) and (max-width: 1278px) { ... }, which means styles are applied starting from medium devices and up to extra large devices.