Bootstrap 5 Breakpoints Single breakpoint

We use media queries to create sensible breakpoints for our interfaces and layouts. There are media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. We use xs, md, lg, xl, xxl for various viewport sizes.

• @include media-breakpoint-only( * )  -  It changes the content according to the size given in ( * ) which are various viewport sizes.

Syntax:

// * includes (xs, sm, md, lg, xl, xxl)

@include media-breakpoint-only(*) { ... }

Example 1: To use @include media-breakpoint-only(md) and show how text color changes with the size of the viewport.

Output:

Example 2: To use various mixins and see the changes for different viewports.

Output:

References: https://getbootstrap.com/docs/5.0/layout/breakpoints/#single-breakpoint