Bootstrap 5 responsive approach ensures web page visibility across devices. Media queries, such as min-width and occasionally max-width, are used to address responsiveness. Efforts are made to minimize reliance on media queries while accommodating complex component needs.

Bootstrap 5 Approach Responsive:

Syntax:

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

// Max-width

@include media-breakpoint-down(lg) { ... }@include media-breakpoint-down(xl) { ... }

// Single-breakpoint

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

// Between-breakpoint

@include media-breakpoint-between(md, xl) { ... }

Example 1: In this example we Bootstrap 5’s responsive approach using a media query to change text color within a container for viewport widths between 768px and 991.98px.

Output :

Example 2: In this example we demonstrates Bootstrap 5’s responsive approach using media queries to change text color within a container for different viewport widths: blue for 768px to 991.98px and green for 991.98px to 1199.98px.

Output:

H