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.

SCSS

@import "../node_modules/bootstrap/scss/bootstrap.scss";
.gfg{
    @include media-breakpoint-only(md) {
        color: red;
    }
}

CSS

@media (min-width: 768px) and (max-width: 991.98px) {
    .gfg {
        color: red;
    }
}

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">
    <title>Single breakpoint</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <style>
        @media (min-width: 768px) and (max-width: 991.98px) {
            .gfg {
                color: red;
            }
        }
    </style>
</head>

<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap5 Breakpoints Single breakpoint
        </h2>
        <br>
        <div class="gfg">
            <h3>GFG</h3>
        </div>
    </div>
</body>

</html>

Output:

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

SCSS

@import "../node_modules/bootstrap/scss/bootstrap.scss";
.gfg{
    @include media-breakpoint-only(xs) {
        color: red;
    }
    @include media-breakpoint-only(lg) {
        color: blue;
    }
}

CSS

@media (max-width: 575.98px) {
    .gfg {
        color: red;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .gfg {
        color: blue;
    }
}

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">
    <title>Single breakpoint</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <style>
        @media (max-width: 575.98px) {
            .gfg {
                color: red;
            }
        }

        @media (min-width: 992px) and (max-width: 1199.98px) {
            .gfg {
                color: blue;
            }
        }
    </style>
</head>

<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap5 Breakpoints Single breakpoint
        </h2>
        <br>
        <div class="gfg">
            <h3>GeeksforGeeks</h3>
            <p>
                A computer science portal for geeks
            </p>
        </div>
    </div>
</body>

</html>

Output:

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

Bootstrap 5 Breakpoints Single breakpoint

Explore