Bootstrap Display Utilities

Display utilities control how an HTML element is displayed on a page.

They can be used to:

• Show an element.
• Hide an element.
• Make an element block-level.
• Make an element inline.
• Make an element inline-block.
• Create a Flexbox container.
• Create a Grid container.
• Change display behavior responsively.

The d-none class sets the element's display to none.

<div class="d-none">

    This content is hidden.

</div>

The element does not occupy space in the layout while it is hidden.

The d-block class makes an element behave as a block-level element.

<span class="d-block">

    Block Element

</span>

A block-level element normally takes the available width and starts on a new line.

The d-inline class makes an element behave as an inline element.

<div class="d-inline">
    First
</div>

<div class="d-inline">
    Second
</div>

Inline elements normally appear on the same line when enough space is available.

The d-inline-block class makes an element behave as an inline-block element.

<div
class="d-inline-block p-3 bg-primary text-white">

    Box One

</div>

<div
class="d-inline-block p-3 bg-success text-white">

    Box Two

</div>

Inline-block elements can appear on the same line while still supporting width and height.

The d-flex class makes an element a Flexbox container.

<div class="d-flex">

    <div>One</div>
    <div>Two</div>
    <div>Three</div>

</div>

The child elements become flex items.

The d-inline-flex class creates an inline-level Flexbox container.

<div class="d-inline-flex">

    <div>One</div>
    <div>Two</div>

</div>

It behaves like an inline element while its children use Flexbox.

The d-grid class makes an element a CSS Grid container.

<div class="d-grid">

    <button class="btn btn-primary">
        Button One
    </button>

    <button class="btn btn-success">
        Button Two
    </button>

</div>

Bootstrap's Grid display utility is useful when creating layouts based on CSS Grid.

The d-inline-grid class creates an inline-level CSS Grid container.

<div class="d-inline-grid">

    <div>One</div>
    <div>Two</div>

</div>

The Grid container participates in inline formatting while its children use CSS Grid.

The d-none utility can hide an element.

<p class="d-none">

    This paragraph is hidden.

</p>

This is useful when content should not be displayed in a particular layout or screen size.

Display utilities can also explicitly set an element to a particular display mode.

<div class="d-block">

    Visible Block

</div>

<span class="d-inline">

    Visible Inline

</span>

Display utilities can be combined with Bootstrap breakpoints.

<div
class="d-none d-md-block">

    Visible from medium screens

</div>

The element is hidden by default and becomes a block-level element at the medium breakpoint and above.

You can hide an element on smaller screens and display it on larger screens.

<div
class="d-none d-lg-block">

    Desktop Content

</div>

The content is hidden until the large breakpoint is reached.

You can create content that appears only below a particular breakpoint.

<div
class="d-block d-md-none">

    Mobile Content

</div>

The element displays as a block by default and is hidden from the medium breakpoint and above.

The display utility can be combined with responsive Flexbox classes.

<div
class="d-flex
flex-column
flex-md-row">

    <div>
        One
    </div>

    <div>
        Two
    </div>

</div>

The layout is a column by default and becomes a row from the medium breakpoint and above.

Display utilities can also be combined with Grid-related layouts.

<div
class="d-grid d-md-flex">

    <button class="btn btn-primary">
        One
    </button>

    <button class="btn btn-success">
        Two
    </button>

</div>

The display mode changes at the specified breakpoint.

Display utilities are useful for creating responsive navigation layouts.

<nav
class="d-flex
flex-column
flex-md-row
gap-2">

    <a href="#">
        Home
    </a>

    <a href="#">
        Courses
    </a>

    <a href="#">
        Contact
    </a>

</nav>

The navigation starts vertically and becomes horizontal on medium screens and above.

Display utilities can change the layout of buttons.

<div class="d-flex gap-2">

    <button class="btn btn-primary">
        Save
    </button>

    <button class="btn btn-success">
        Submit
    </button>

</div>

You can combine display, Flexbox, and gap utilities to create clean button layouts.

Display utilities are useful for responsive card layouts.

<div
class="d-flex
flex-column
flex-md-row
gap-3">

    <div class="card flex-fill">

        <div class="card-body">
            Card One
        </div>

    </div>

    <div class="card flex-fill">

        <div class="card-body">
            Card Two
        </div>

    </div>

</div>

Display utilities can help arrange form controls responsively.

<form
class="d-flex
flex-column
flex-md-row
gap-2">

    <input
    type="text"
    class="form-control"
    placeholder="Search">

    <button
    class="btn btn-primary">

        Search

    </button>

</form>

Display utilities can control how images participate in a layout.

<img
src="image.jpg"
class="d-block mx-auto"
alt="Example image">

Here, d-block makes the image block-level and mx-auto can be used to horizontally center it when the image has an appropriate width.

Inline elements can be changed to block or inline-block elements.

<span class="d-block">
    Block Text
</span>

<span class="d-inline-block">
    Inline Block Text
</span>

This can be useful when controlling the layout of labels, links, and small content elements.

Bootstrap supports breakpoint-specific display classes.

<div
class="d-none d-sm-block d-md-flex">

    Responsive Element

</div>

This example uses different display modes at different responsive breakpoints.

• Hidden by default.
• Block from the small breakpoint.
• Flex from the medium breakpoint.

Display utilities make it easy to create different content for mobile and desktop layouts.

<div class="d-block d-md-none">

    Mobile Menu

</div>


<div class="d-none d-md-block">

    Desktop Menu

</div>

This technique can be useful when different interface structures are needed at different viewport sizes.

Bootstrap also provides display utilities such as d-table, d-table-row, and d-table-cell.

<div class="d-table w-100">

    <div class="d-table-row">

        <div class="d-table-cell">
            One
        </div>

        <div class="d-table-cell">
            Two
        </div>

    </div>

</div>

These utilities reproduce table-like display behavior without using an actual HTML table.

The d-flow-root utility creates a block formatting context using display: flow-root.

<div class="d-flow-root">

    Content

</div>

This utility can be useful for containing floated elements within a section.

Hiding content with d-none removes the element from the visual layout and accessibility tree in normal use.

When content must remain available to assistive technologies while being visually hidden, Bootstrap provides a separate visually hidden utility.

<span class="visually-hidden">

    Screen reader text

</span>

Avoid these common mistakes:

• Forgetting that d-none hides the element completely.
• Using the wrong breakpoint.
• Confusing d-none with visually-hidden.
• Using too many display classes without understanding their order.
• Forgetting that responsive classes apply from their breakpoint and above.
• Using d-flex when a normal block layout is sufficient.
• Creating duplicate mobile and desktop content unnecessarily.
• Hiding important content without considering accessibility.

The following example displays a mobile version and desktop version using Bootstrap display utilities.

<div
class="d-block d-md-none p-4 bg-light rounded">

    <h4>
        Mobile Layout
    </h4>

    <p>
        This section is displayed on smaller screens.
    </p>

</div>


<div
class="d-none d-md-block p-4 bg-light rounded">

    <h4>
        Desktop Layout
    </h4>

    <p>
        This section is displayed from the medium breakpoint and above.
    </p>

</div>

This complete example combines responsive display, Flexbox, breakpoints, alignment, and spacing utilities.

<section class="py-5">

    <div class="container">


        <div
        class="d-flex
        flex-column
        flex-lg-row
        justify-content-between
        align-items-center
        gap-4
        p-4
        bg-light
        rounded">


            <div>

                <h2 class="mb-3">

                    Bootstrap Display

                </h2>


                <p class="mb-0">

                    Learn how Bootstrap
                    display utilities help
                    create responsive layouts.

                </p>

            </div>


            <div
            class="d-flex
            flex-column
            flex-sm-row
            gap-2">


                <button
                class="btn btn-primary">

                    Learn More

                </button>


                <button
                class="btn btn-success">

                    Start Course

                </button>


            </div>


        </div>


    </div>

</section>