What is Display utilities in Bootsrap?

Bootsrapmarkup~5 mins

Display utilities in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Display utilities help you quickly show or hide elements on your webpage. They make your page look good on all devices without writing extra CSS.

You want to hide a menu on small screens but show it on larger screens.

You need to completely hide a button, removing its space from the page.

You want to change an element from block to inline without writing CSS.

You want to show a message only on mobile devices.

You want to quickly toggle visibility during development.

Syntax

Bootsrap

class="d-{value} d-{breakpoint}-{value}"

d- controls display like block, inline, none, etc.

{breakpoint} is optional and controls when the display applies (e.g., sm, md, lg, xl, xxl).

Examples

This element is hidden everywhere.

Bootsrap

<div class="d-none">Hidden on all screens</div>

Shows block on small screens, hides on medium and larger.

Bootsrap

<div class="d-block d-md-none">Visible only on small screens</div>

Inline display on small and medium, hidden on large screens.

Bootsrap

<span class="d-inline d-lg-none">Inline on small and medium, hidden on large</span>

Element uses flex display on all screen sizes.

Bootsrap

<p class="d-flex">Flex container always visible</p>

Sample Program

This page shows four boxes with different display utilities. The first box is hidden everywhere. The second shows only on small screens. The third is inline on small and medium but hidden on large. The last is always visible as a flex container.

Bootsrap

<!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>
  <main class="container mt-4">
    <h1>Display Utilities Demo</h1>
    <div class="d-none bg-primary text-white p-2 mb-2">Hidden on all screens</div>
    <div class="d-block d-md-none bg-success text-white p-2 mb-2">Visible only on small screens (block)</div>
    <div class="d-inline d-lg-none bg-warning text-dark p-2 mb-2">Inline on small/medium, hidden on large</div>
    <div class="d-flex bg-info text-white p-2 mb-2">Flex container always visible</div>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Use d-none to hide elements completely.

Combine display utilities with breakpoints like d-md-block to control visibility on different screen sizes.

Remember that hidden elements with d-none are removed from the layout and not focusable.

Summary

Display utilities let you quickly show or hide elements without writing CSS.

You can control display on different screen sizes using breakpoint classes.

They help make your site responsive and user-friendly on all devices.