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 =
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 =
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 =
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 =
height = "200px" width = "200px" >
</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Display Hiding Elements
Reference: https://getbootstrap.com/docs/5.0/utilities/display/#display-in-print
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...