Utilities

Visibility

Use .visible to make an element visible, and .invisible to hide it while preserving its layout space.

<div class="visible mb-2">I am visible</div>
<div class="invisible mb-2">I am invisible but still take up space</div>
<div class="visible mb-2">I follow the invisible one</div>

Visible box

Invisible box

This box remains in place

Display Toggle

Control an element’s display property directly with .hidden, .block, .inline, and .inline-block.

<span class="hidden">Hidden</span>
<div class="block mb-2">Block-level</div>
<span class="inline mb-2">Inline</span>
<div class="inline-block">Inline-block</div>

I am block-level

I am inline

I am inline-block

Screen‑Only / Print‑Only

Show content exclusively on screen (.screen-only) or in printed output (.print-only).

<div class="screen-only mb-2">Visible on screen</div>
<div class="print-only mb-2">Visible in print</div>

I appear on screen

I appear when you print

Use your browser’s print preview to see the "print-only" content.

Responsive Display

Apply display utilities at specific breakpoints: .sm-*, .md-*, .lg-*, .xl-*.

<div class="sm-hidden md-block lg-inline-block bg-warning text-black p-3">
  Responsive box
</div>

Resize your viewport:

I hide on small (<640px), show as block on medium (≥640px), inline‑block on large (≥768px)