Bootstrap 5 Breakpoints Media queries

Last Updated : 20 Dec, 2022

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

Min-width – For Min-Width breakpoints, CSS is only applied to devices whose width is greater than min-width. @include media-breakpoint-up( sm ) { … } means that the min-width is sm and the same CSS would be applied for devices larger than the min-width.
Max-width – For Max-width, CSS is only applied to devices whose width is smaller than mentioned in the media query. @include media-breakpoint-down(sm) { … } is used for styling classes of a given size sm or smaller.
Single breakpoint – There are media queries and mixins that target a single segment of screen sizes using minimum and maximum breakpoint widths. @include media-breakpoint-only( * ) changes the content according to the size given in ( * ) which are various viewport sizes.
Between breakpoint – There are media queries and mixins that target multiple segments of screen sizes using minimum and maximum breakpoint widths. @include media-breakpoint-between(md, xl) { … } apply styles starting from medium devices and up to extra large devices.

Syntax:

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

The ‘*’ is replaced by up, down, only, between for min-width, max-width, single-breakpoint, and between breakpoints respectively.

The ‘**’ is replaced by various viewport sizes like xs, sm, md, lg, xl, xxl.

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

SCSS:

.custom-class {
   display: none;
}
@include media-breakpoint-up(sm) {
   .custom-class {
       display: block;
   }
}

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>Breakpoints Media queries</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <style>
        .custom-class {
            display: none;
        }
 
        @media (min-width: 576px) {
            .custom-class {
                display: block;
            }
        }
    </style>
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap5 Breakpoints Media queries
        </h2>
        <br>
        <div class="custom-class">
            <h5>
                This block is not visible for sm 
                breakpoint but visible for other 
                breakpoints
            </h5>
        </div>
    </div>
</body>
</html>

Output:

Example 2: Use a Max-width breakpoint to change the display from none to block.

SCSS

.custom-class {
   display: none;
}
@include media-breakpoint-down(md) {
   .custom-class {
       display: block;
   }
}

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>Breakpoints Media queries</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <style>
        .custom-class {
            display: none;
        }
 
        @media (max-width: 767.98px) {
            .custom-class {
                display: block;
            }
        }
    </style>
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap5 Breakpoints Media queries
        </h2>
        <br>
        <div class="max-class">
            <h4>
                GFG | A computer science portal for geeks
            </h4>
        </div>
    </div>
</body>
</html>