Bootstrap 5 Breakpoints Min-width

For Min-Width breakpoints, CSS would only be applied for devices larger than min-width. There are media queries and mixins for targeting segments of screen sizes using the minimum and maximum breakpoint widths. We use xs, md, lg, xl, xxl for various viewport sizes.

There is no need for media query for xs breakpoint because it is effective (min-width:0).

• @include media-breakpoint-up( sm ) { ... }  -  It means that the min-width is sm and the same CSS would be applied for devices larger than the min-width.

Syntax:

@include media-breakpoint-up(sm) { ... }

Example 1: Use the Min-width breakpoint to change the display from none to block.

Output:

Example 2: Use the Min-width breakpoint to change the color of the paragraph with changing sizes of viewports.

Output:

References: https://getbootstrap.com/docs/5.0/layout/breakpoints/#min-width