Open In App

What is use of d-none and d-block Classes in Bootstrap?

Last Updated : 19 Feb, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

The .d-none and .d-block classes in Bootstrap are used for controlling the visibility of elements. .d-none hides the element by default, while .d-block displays it as a block-level element.

Syntax:

<div class="d-none">Hidden content</div>
<div class="d-block">Visible content</div>

Explanation: (.d-none) class sets the element’s display property to ‘none’, making it invisible on the webpage. Conversely,
.d-block class sets the display property to ‘block’, rendering the element as a block-level element, causing it to appear on the webpage. These classes provide a simple way to toggle the visibility of elements in Bootstrap-based projects.

Features:

  • .d-none hides the element by setting its display property to ‘none’.
  • .d-block displays the element as a block-level element, making it visible.
  • These classes are part of Bootstrap’s utility classes for controlling visibility.
  • They offer a straightforward way to toggle the visibility of elements on the webpage.

Ref: https://www.geeksforgeeks.org/bootstrap-5-display/


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads