Bootstrap Display

Bootstrap Display Overview

Classes like d-none, d-block, d-inline, d-inline-block, d-flex, d-inline-flex, and d-grid map directly to their corresponding CSS display values, letting you switch an element's rendering mode without writing custom CSS. Combined with breakpoint infixes, the same element can render differently across screen sizes.

The most common pattern is a responsive show/hide pair, like d-none d-md-block, which hides an element by default and reveals it starting at a chosen breakpoint, commonly used for elements like desktop-only sidebars or mobile-only menu buttons.

Bootstrap Display Example

<div class="d-none d-md-block">
  Visible from md breakpoint upward (desktop sidebar, etc.)
</div>

<div class="d-block d-md-none">
  Visible only below the md breakpoint (mobile-only banner)
</div>

<div class="d-grid gap-2">
  <button class="btn btn-primary">Full-width stacked button</button>
  <button class="btn btn-outline-secondary">Another full-width button</button>
</div>

The first two blocks form a classic responsive show/hide pair: one appears only at md and above, the other only below md. The final example uses d-grid to stack full-width buttons vertically with consistent gap spacing, a common pattern for mobile-friendly stacked action buttons.

Top 10 Bootstrap Display Examples

These are the display utility patterns you'll use to control element visibility and layout context.

Popular Real-World Bootstrap Display Examples

These display patterns solve common responsive visibility and layout-context problems.

Best Practices

• Prefer responsive display pairs (d-none d-md-block) over duplicating markup for mobile and desktop.
• Use d-grid for simple stacked full-width layouts instead of a heavier grid or flex setup.
• Reserve d-none for truly hidden content; use visually-hidden instead when content should remain accessible to screen readers.
• Use print-specific display classes (d-print-none, d-print-block) to tailor printed output.
• Keep responsive show/hide pairs consistent across similar components for predictable behavior.
• Combine d-flex or d-grid with other utilities rather than writing new custom layout CSS.
• Test hidden/shown elements at every breakpoint boundary, not just the extremes.

Common Mistakes

• Using d-none to hide content that should still be available to screen readers, when visually-hidden was the better choice.
• Forgetting the complementary class in a show/hide pair, leaving an element permanently hidden or shown.
• Duplicating entire sections of markup for mobile and desktop instead of using a single responsive display pattern.
• Not testing print styles, leaving irrelevant navigation or ads in printed pages.
• Overusing d-none/d-block toggling as a substitute for a properly responsive single layout.
• Applying d-flex without any actual flex children needing alignment, adding unnecessary classes.

Key Takeaways

• Display utilities map directly to CSS display values like block, flex, grid, and none.
• Responsive infixes allow the same element to render differently across breakpoints.
• d-none hides content entirely, while visually-hidden keeps it available to screen readers.
• d-grid is a lightweight way to stack full-width elements with consistent spacing.
• Print-specific display utilities tailor what appears in printed output.