Open In App

Bootstrap 5 Breakpoints Max-width

For Max-width, CSS is executed for the size smaller than mentioned in the media query. There are media queries and mixins for targeting segments of screen sizes using the minimum and maximum breakpoint widths. We use xs, md, lg, xl, xxl for various viewport sizes. 

We often utilize media queries that travel in the opposite way that is the given size of the screen or smaller. There is no need for media query for xs breakpoint because it’s effective (min-width:0).

These properties take declared breakpoints, subtract .02px from them, and use them as our max-width values as our browsers don’t currently support range context queries.

While using these breakpoints we need to subtract 0.2px from them, and then use them as our max-width because our browsers currently don’t support range context queries.

Syntax:

// * is sm, md, lg, xl, xxl
@include media-breakpoint-down(*) { ... }

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




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




.custom-class {
    display: none;
}
@media (max-width: 767.98px) {
    .custom-class {
        display: block;
    }
}




<!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 Max-width</title>
    <link href=
          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 Max-width
        </h2>
        <br>
        <div class="custom-class">
            <p>
                A data structure is a storage that is
                used to store and organize data. It
                is a way of arranging data on a computer
                so that it can be accessed and updated efficiently.
            </p>
        </div>
    </div>
</body>
</html>

Output:

 

Example 2: Use Max-width breakpoint to change the color of the header at different max-width breakpoints.




.max-class {
    color: green;
}
@include media-breakpoint-down(xl) {
    .max-class {
        color: blue;
    }
}
@include media-breakpoint-down(md) {
    .max-class {
        color: red;
    }
}




.max-class {
    color: green;
}
@media (max-width: 1199.98px) {
    .max-class {
        color: blue;
    }
}
@media (max-width: 767.98px) {
    .max-class {
        color: red;
    }
}




<!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 Max-width</title>
    <link href=
          rel="stylesheet">
    <style>
        .max-class {
            color: green;
        }
 
        @media (max-width: 1199.98px) {
            .max-class {
                color: blue;
            }
        }
 
        @media (max-width: 767.98px) {
            .max-class {
                color: red;
            }
        }
    </style>
</head>
 
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap5 Breakpoints Max-width
        </h2>
        <br>
        <div class="max-class">
            <h4>
                GFG | A computer science portal for geeks
            </h4>
        </div>
    </div>
</body>
</html>

Output:

 

References: https://getbootstrap.com/docs/5.0/layout/breakpoints/#max-width


Article Tags :