Responsive utility classes in Bootstrap

Responsive utility classes in Bootstrap control the visibility and display behavior of elements at different screen sizes, making it easier to create responsive layouts.

Bootstrap 5 Breakpoints

Bootstrap 5 uses six responsive breakpoints:

xs: Extra-small devices with a width less than 576px.
sm: Small devices with a width greater than or equal to 576px.
md: Medium devices with a width greater than or equal to 768px.
lg: Large devices with a width greater than or equal to 992px.
xl: Extra-large devices with a width greater than or equal to 1200px.
xxl: Extra-extra-large devices with a width greater than or equal to 1400px.

Note: Bootstrap 5 does not use an xs class prefix. The base utility without a breakpoint, such as .d-none or .d-block, applies to extra-small screens and above.

Responsive Display Utility Classes

Bootstrap uses .d-* classes to control the display property of elements at different breakpoints.

.d-none: Hides an element at all breakpoints.
.d-block: Displays an element as a block at all breakpoints.
.d-none .d-sm-block: Hides an element below 576px and displays it from 576px and above.
.d-sm-none .d-md-block: Hides an element from 576px to below 768px and displays it from 768px and above.
.d-md-none .d-lg-block: Hides an element from 768px to below 992px and displays it from 992px and above.
.d-lg-none .d-xl-block: Hides an element from 992px to below 1200px and displays it from 1200px and above.
.d-xl-none .d-xxl-block: Hides an element from 1200px to below 1400px and displays it from 1400px and above.
.d-block .d-sm-none: Displays an element below 576px and hides it from 576px and above.
.d-none .d-sm-block .d-md-none: Displays an element from 576px to below 768px.
.d-none .d-md-block .d-lg-none: Displays an element from 768px to below 992px.
.d-none .d-lg-block .d-xl-none: Displays an element from 992px to below 1200px.
.d-none .d-xl-block .d-xxl-none: Displays an element from 1200px to below 1400px.

Syntax:

<div class="d-none d-md-block">
    Content
</div>

This element remains hidden below 768px and is displayed from the md breakpoint onward.

Example 1: Demonstrates responsive display utilities using the md breakpoint.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
        rel="stylesheet">

    <style>
        .pastel-blue {
            background-color: #dbeafe;
        }

        .pastel-pink {
            background-color: #fce7f3;
        }

        .box {
            padding: 20px;
            margin-bottom: 10px;
            border-radius: 8px;
        }
    </style>

    <title>Responsive Display Utilities</title>
</head>

<body>

<div class="container mt-4">

    <div class="row">
        <div class="col d-md-block pastel-blue box">
            Text 1 of first row
        </div>

        <div class="col d-md-none pastel-pink box">
            Text 2 of first row
        </div>

        <div class="col d-md-block pastel-blue box">
            Text 3 of first row
        </div>
    </div>

    <div class="row">
        <div class="col d-md-none pastel-pink box">
            Text 1 of second row
        </div>

        <div class="col d-md-block pastel-blue box">
            Text 2 of second row
        </div>

        <div class="col d-md-none pastel-pink box">
            Text 3 of second row
        </div>
    </div>

</div>

</body>
</html>

Output:

Example 2: Demonstrates responsive display utilities using the sm breakpoint.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
        rel="stylesheet">

    <style>
        .pastel-green {
            background-color: #dcfce7;
        }

        .pastel-yellow {
            background-color: #fef3c7;
        }

        .box {
            padding: 20px;
            margin-bottom: 10px;
            border-radius: 8px;
        }
    </style>

    <title>Responsive Display Utilities</title>
</head>

<body>

<div class="container mt-4">

    <div class="row">
        <div class="col d-sm-none pastel-yellow box">
            Text 1 of first row
        </div>

        <div class="col d-sm-block pastel-green box">
            Text 2 of first row
        </div>

        <div class="col d-sm-none pastel-yellow box">
            Text 3 of first row
        </div>
    </div>

    <div class="row">
        <div class="col d-sm-block pastel-green box">
            Text 1 of second row
        </div>

        <div class="col d-sm-none pastel-yellow box">
            Text 2 of second row
        </div>

        <div class="col d-sm-block pastel-green box">
            Text 3 of second row
        </div>
    </div>

</div>

</body>
</html>

Output:

Responsive utility classes in Bootstrap

Bootstrap 5 Breakpoints

Responsive Display Utility Classes

Explore