BootstrapHow-ToBeginner · 3 min read

How to Use Display Utilities in Bootstrap for Responsive Layouts

Bootstrap's display utilities let you quickly control how elements show or hide using classes like d-none to hide or d-block to show. You can also use responsive variants like d-md-none to hide elements only on medium screens and up.

📐

Syntax

Bootstrap display utilities use classes in this pattern: d-{value} or d-{breakpoint}-{value}.

{value} controls display type: none, block, inline, inline-block, flex, inline-flex.
{breakpoint} is optional and can be sm, md, lg, xl, or xxl for responsive control.

Example: d-none hides an element always, d-md-block shows it as block only on medium screens and larger.

html

<!-- Hide element always -->
<div class="d-none">Hidden always</div>

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

<!-- Show flex on large screens -->
<div class="d-lg-flex">Flex on large screens</div>

Output

Three divs: first hidden always, second visible as block on medium+ screens, third flex on large+ screens

💻

Example

This example shows how to hide a paragraph on small screens and show it as block on medium and larger screens using Bootstrap display utilities.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Display 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 paragraph 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 paragraph is visible only on small screens.</p>
  </div>
</body>
</html>

Output

On small screens, you see a gray paragraph. On medium and larger screens, you see a blue paragraph.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap display utilities include:

Using d-none without a responsive breakpoint hides the element on all screen sizes, which may confuse beginners expecting it to hide only on some screens.
Forgetting to combine d-none with a responsive display class like d-md-block to show the element again on larger screens.
Using conflicting display classes on the same element can cause unexpected results.

html

<!-- Wrong: element hidden on all screens -->
<div class="d-none d-md-none">Will never show</div>

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

Output

First div never appears; second div appears only on medium and larger screens.

📊

Quick Reference

Class	Effect
d-none	Hide element on all screen sizes
d-block	Display element as block on all screen sizes
d-inline	Display element as inline on all screen sizes
d-inline-block	Display element as inline-block on all screen sizes
d-flex	Display element as flex on all screen sizes
d-inline-flex	Display element as inline-flex on all screen sizes
d-sm-none	Hide element on small screens and up
d-md-block	Show element as block on medium screens and up
d-lg-flex	Show element as flex on large screens and up

✅

Key Takeaways

Use d-none to hide elements and d-block or d-flex to show them.

Add responsive breakpoints like d-md-none to control visibility on specific screen sizes.

Always pair d-none with a display class for larger screens to avoid hiding elements permanently.

Avoid conflicting display classes on the same element to prevent unexpected behavior.

Bootstrap display utilities help create responsive layouts quickly without custom CSS.