Bootstrap 5 Approach Responsive

Last Updated : 15 Apr, 2024

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:

Mixin	Description
@include media-breakpoint-only(md) { … }	Executes code only when the screen size is ‘md’.
@include media-breakpoint-between(md, xl) { … }	Executes code when the screen size is between ‘md’ and ‘xl’.

Syntax:

// Min-width

@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.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            http-equiv="X-UA-Compatible"
            content="IE=edge"
        />
        <meta
            name="viewport"
            content="width=device-width, 
                     initial-scale=1.0"
        />
        <link
            href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <title>
            Bootstrap 5 Approach Responsive
        </title>
        <style>
            @media (min-width: 768px) and (max-width: 991.98px) {
                .container {
                    color: blue;
                }
            }
        </style>
    </head>
    <body>
        <div class="text-center">
            <h2>
                Bootstrap 5 Approach Responsive
            </h2>
            <p class="container">
                GeeksforGeeks is a great platform
                to learn various skills like
                HTML,CSS,Javascript and many more.
            </p>
        </div>
    </body>
</html>

Output :

Bootstrap 5 Approach Responsive Example 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.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            http-equiv="X-UA-Compatible"
            content="IE=edge"
        />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <link
            href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <title>
            Bootstrap 5 Approach Responsive
        </title>
        <style>
            @media (min-width: 768px) and (max-width: 991.98px) {
                .container {
                    color: blue;
                }
            }

            @media (min-width: 991.98px) and (max-width: 1199.98px) {
                .container {
                    color: green;
                }
            }
        </style>
    </head>
    <body>
        <div class="text-center">
            <h2>
                Bootstrap 5 Approach Responsive
            </h2>
            <p class="container">
                GeeksforGeeks is a great platform
                to learn various skills like
                HTML,CSS,Javascript and many more.
            </p>
        </div>
    </body>
</html>