Bootstrap uses a mobile-first approach with specific media query breakpoints to scale interfaces. If you are using Sass, you should use the provided mixins instead of writing raw media queries.
Breakpoints
xs: Extra small (portrait phones, < 576px). No media query needed as this is the default.sm: Small (landscape phones, $\ge$ 576px).md: Medium (tablets, $\ge$ 768px).lg: Large (desktops, $\ge$ 992px).xl: Extra large (large desktops, $\ge$ 1200px).
Sass Mixins
@include media-breakpoint-up(breakpoint): Targets a breakpoint and everything larger.@include media-breakpoint-down(breakpoint): Targets a breakpoint and everything smaller.@include media-breakpoint-only(breakpoint): Targets only the specific breakpoint range.@include media-breakpoint-between(start, end): Targets a range between two breakpoints.
// Example: Hide starting at xs, and show at the sm breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
// Example: Apply styles from medium up to extra large
@include media-breakpoint-between(md, xl) {
.custom-class {
/* styles */
}
}