BootstrapHow-ToBeginner · 3 min read

How to Use Visibility Utilities in Bootstrap for Responsive Design

Bootstrap visibility utilities use classes like d-none and d-{breakpoint}-{value} to control element display on different screen sizes. You add these classes to HTML elements to show or hide them responsively without writing custom CSS.

📐

Syntax

Bootstrap visibility utilities use the d- prefix followed by display values and optional breakpoints.

d-none: hides the element on all screen sizes.
d-block, d-inline, d-inline-block: show the element with different display types.
d-{breakpoint}-none: hides the element starting from the specified breakpoint.
d-{breakpoint}-block: shows the element starting from the specified breakpoint.

Breakpoints include sm, md, lg, xl, and xxl.

html

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

<!-- Show element only on medium and larger screens -->
<div class="d-none d-md-block">Visible on md and up</div>

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

💻

Example

This example shows a paragraph hidden on small screens and visible on medium and larger screens using Bootstrap visibility utilities.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Visibility Utilities 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 d-md-block bg-primary text-white p-3">This text is hidden on small screens and visible on medium and larger screens.</p>
    <p class="d-block d-md-none bg-secondary text-white p-3">This text is visible only on small screens.</p>
  </div>
</body>
</html>

Output

A webpage with two paragraphs: one blue background paragraph visible only on medium and larger screens, and one gray background paragraph visible only on small screens.

⚠️

Common Pitfalls

Forgetting to combine d-none with breakpoint classes can hide elements on all screen sizes unintentionally.
Using conflicting display classes on the same element can cause unpredictable results.
Not testing on different screen sizes may lead to unexpected visibility behavior.

Always pair d-none with a breakpoint-specific d-*-block or similar class to control visibility properly.

html

<!-- Wrong: element hidden everywhere -->
<div class="d-none d-md-none">This will never show</div>

<!-- Right: hidden on small, visible on medium and up -->
<div class="d-none d-md-block">This shows on md and larger</div>

📊

Quick Reference

Class	Effect
d-none	Hide element on all screen sizes
d-block	Show element as block on all screen sizes
d-inline	Show element as inline on all screen sizes
d-inline-block	Show element as inline-block on all screen sizes
d-sm-none	Hide element on small (≥576px) and larger screens
d-md-block	Show element as block on medium (≥768px) and larger screens
d-lg-inline	Show element as inline on large (≥992px) and larger screens
d-xl-inline-block	Show element as inline-block on extra large (≥1200px) and larger screens
d-xxl-none	Hide element on extra extra large (≥1400px) and larger screens

✅

Key Takeaways

Use d-none to hide elements and combine with breakpoint classes like d-md-block to show them responsively.

Bootstrap visibility utilities control display without custom CSS, making responsive design easier.

Always test visibility on different screen sizes to avoid unexpected hidden or visible elements.

Avoid conflicting display classes on the same element to prevent unpredictable results.