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.

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.

Output:

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