BootstrapHow-ToBeginner · 3 min read

How to Use d-none in Bootstrap to Hide Elements

In Bootstrap, use the d-none class to hide any element by setting its display to none. You can also combine it with responsive classes like d-sm-none to hide elements only on specific screen sizes.

📐

Syntax

The d-none class sets an element's CSS display property to none, hiding it from view. Bootstrap also provides responsive variations like d-sm-none, d-md-none, d-lg-none, and d-xl-none to hide elements on specific screen widths.

d-none: Hide on all screen sizes
d-sm-none: Hide on small screens and up (≥576px)
d-md-none: Hide on medium screens and up (≥768px)
d-lg-none: Hide on large screens and up (≥992px)
d-xl-none: Hide on extra large screens and up (≥1200px)

html

<div class="d-none">Hidden on all screens</div>
<div class="d-sm-none">Hidden on small screens and larger</div>
<div class="d-md-none">Hidden on medium screens and larger</div>

Output

No visible output because all divs are hidden on their respective screen sizes.

💻

Example

This example shows a paragraph hidden on all screen sizes using d-none and another paragraph visible only on small screens and larger using d-sm-block d-none.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap d-none Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <p class="d-none">This paragraph is hidden on all screen sizes.</p>
  <p class="d-sm-block d-none">This paragraph is visible only on small screens and larger.</p>
</body>
</html>

Output

The first paragraph is never visible. The second paragraph appears only on screens 576px wide or larger.

⚠️

Common Pitfalls

Common mistakes include:

Using d-none without a matching d-*-block or other display class to show the element again on some screen sizes.
Expecting d-none to hide elements only visually but forgetting it removes the element from layout and accessibility.
Not including the Bootstrap CSS file, so the class has no effect.

html

<!-- Wrong: element hidden on all screens with no way to show -->
<div class="d-none">Hidden everywhere</div>

<!-- Right: hidden on small screens only, visible on medium and up -->
<div class="d-sm-none d-md-block">Hidden on small, visible on medium+</div>

Output

The first div is never visible. The second div is hidden on small screens but visible on medium and larger screens.

📊

Quick Reference

Class	Effect	Screen Size
d-none	Hide element	All sizes
d-sm-none	Hide element	Small (≥576px) and up
d-md-none	Hide element	Medium (≥768px) and up
d-lg-none	Hide element	Large (≥992px) and up
d-xl-none	Hide element	Extra large (≥1200px) and up

✅

Key Takeaways

Use d-none to hide elements completely on all screen sizes.

Combine d-none with responsive display classes like d-sm-block to control visibility by screen size.

Remember d-none removes the element from layout and accessibility, not just visually hiding it.

Always include Bootstrap CSS for these classes to work.

Use responsive classes to create flexible, mobile-friendly layouts.