Bootstrap 5 Display Hiding Elements

Last Updated : 21 Dec, 2022

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:

Bootstrap 5 Display Hiding Elements

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>