BootstrapHow-ToBeginner · 3 min read

How to Hide Element in Bootstrap: Simple Methods Explained

In Bootstrap, you can hide elements using the d-none class which sets display: none;. For responsive hiding, use classes like d-sm-none to hide elements on specific screen sizes.

📐

Syntax

Bootstrap uses utility classes to control element visibility. The main class is d-none which hides an element by setting its display to none. You can combine it with responsive breakpoints like d-sm-none, d-md-none, d-lg-none, and d-xl-none to hide elements on specific screen sizes.

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

html

<!-- Hide element on all screen sizes -->
<div class="d-none">Hidden on all screens</div>

<!-- Hide element on small screens and larger -->
<div class="d-sm-none">Hidden on small screens and up</div>

💻

Example

This example shows a paragraph hidden on all screen sizes using d-none and another paragraph hidden only on medium screens and larger using d-md-none. Resize the browser to see the effect.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Hide Element Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <p class="d-none">This paragraph is hidden on all screen sizes.</p>
    <p class="d-md-none">This paragraph is hidden on medium screens and larger (≥768px).</p>
    <p>This paragraph is always visible.</p>
  </div>
</body>
</html>

Output

A webpage with three paragraphs: the first is never visible, the second disappears on medium and larger screens, and the third is always visible.

⚠️

Common Pitfalls

Common mistakes when hiding elements in Bootstrap include:

Using d-none without considering responsive needs, which hides the element on all devices.
Confusing breakpoint classes like d-sm-none which hides on small screens and up, not just small screens.
Not including Bootstrap CSS, so classes have no effect.
Trying to hide elements with inline styles that conflict with Bootstrap classes.

html

<!-- Wrong: hides element on all screens, might be unintended -->
<div class="d-none">Hidden everywhere</div>

<!-- Right: hides only on large screens and up -->
<div class="d-lg-none">Hidden on large screens and up</div>

📊

Quick Reference

Class	Effect	Screen Size Range
d-none	Hide element	All screen 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 on all screen sizes in Bootstrap.

Apply responsive classes like d-md-none to hide elements on specific screen widths.

Always include Bootstrap CSS for utility classes to work.

Understand breakpoint classes hide elements on that size and larger, not just that size.

Avoid conflicting inline styles that override Bootstrap's display utilities.