Bootstrap 5 Display Hiding Elements

Bootstrap 5 Display Hiding elements is used to display or hide some content. This can be done based on screen size also.

Bootstrap 5 Display Hiding Elements Classes:

d-*-none: To hide the content based on the viewport. The * can be substituted with viewports like sm, md, lg, xl, xxl.
d-*-block: To show the content based on the viewport. The * can be substituted with viewports like sm, md, lg, xl, xxl.

Syntax:

<div class="d-*-none">
    ...
</div>

Example 1: In this example, we will learn about Display Hiding elements.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap 5 Display Hiding elements
        </h2>
        <p>There is an image below but 
           since we have used class <var>d-none</var>
            It won't be visible
        </p>
        <div class="d-none">
            <p class="text-danger">    
                I won't be visible on any screen
            </p>
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png" 
                height="200px" width="200px">
        </div>     
    </div>
</body>
</html>

Output:

Example 2: In this example, we will see how to hide elements in some breakpoints. We will hide the image on a medium screen.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>
            Bootstrap 5 Display Hiding elements
        </h2>

        <div class="d-md-none d-lg-block">
            <p class="text-danger">
                I will be visible all screens except medium screen
            </p>
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png"
                height="200px" width="200px">
        </div>
    </div>
</body>
</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/utilities/display/#display-in-print

Bootstrap 5 Display Hiding Elements

Explore