What are media queries in Bootstrap 4?
Media queries are a CSS feature that enables the content of a website to adapt to different screen sizes and resolutions, thus customizing the website for different devices.
Bootstrap 4 is developed with a mobile-first approach in mind, and because of this, it uses several media queries that are based on minimum
They are as follows:
// Small devices (landscape phones)@media (min-width: 576px) { ... }// Medium devices (tablets)@media (min-width: 768px) { ... }// Large devices (desktops)@media (min-width: 992px) { ... }// Extra large devices (large desktops)@media (min-width: 1200px) { ... }
There is no media query for devices with a screen width smaller than 576px because that is the default size in Bootstrap, which uses a mobile-first approach.
Bootstrap writes its source CSS code in SASS, which also allows users to use these SASS mixins to write media queries:
@include media-breakpoint-up(xs) { ... } // Extra small phones@include media-breakpoint-up(sm) { ... } // Phones@include media-breakpoint-up(md) { ... } // Tablets@include media-breakpoint-up(lg) { ... } // Desktops@include media-breakpoint-up(xl) { ... } // Extra large desktops
Bootstrap also allows usage of media queries that go in the opposite direction, meaning maximum viewport width of something and everything smaller than that.
These are the media queries that utilize that approach:
// Extra small devices (portrait phones)@media (max-width: 575.98px) { ... }// Small devices (landscape phones)@media (max-width: 767.98px) { ... }// Medium devices (tablets)@media (max-width: 991.98px) { ... }// Large devices (desktops)@media (max-width: 1199.98px) { ... }
There is no media query for extra-large devices because those devices have no upper bound on their width.
These maximum width based media queries are also available as SASS mixins:
@include media-breakpoint-down(xs) { ... } // Extra small phones@include media-breakpoint-down(sm) { ... } // Small phones@include media-breakpoint-down(md) { ... } // Tablets@include media-breakpoint-down(lg) { ... } // Desktops
There are also situations in which one might need to target devices in a range between minimum and maximum viewport width. When it comes to such situations, Bootstrap comes with the following media queries that use both minimum and maximum breakpointsto create the targeted range:
// Extra small devices (portrait phones)@media (max-width: 575.98px) { ... }// Small devices (landscape phones)@media (min-width: 576px) and (max-width: 767.98px) { ... }// Medium devices (tablets)@media (min-width: 768px) and (max-width: 991.98px) { ... }// Large devices (desktops)@media (min-width: 992px) and (max-width: 1199.98px) { ... }// Extra large devices (large desktops)@media (min-width: 1200px) { ... }
By using SASS mixin, you can target your desired range like this:
@include media-breakpoint-between(md, xl) { ... }
