Bootstrap provides an extensive suite of shorthand utility classes to quickly and responsively toggle the CSS display property of any HTML component. This allows you to construct and destruct page layouts rapidly across different devices!
Typically, HTML elements have default display values. For example, <div> is naturally a block, while <span> is inherently inline. You can instantly overwrite these native behaviors using the `.d-*` classes.
.d-block: Forces the element to take up the full horizontal width and jump to a new line..d-inline: Shrinks the element to precisely wrap its text content and allows it to sit horizontally next to other inline elements. (Note: Margins and custom widths often break on pure inline elements)..d-inline-block: The hybrid! Placed inline horizontally with other items, but acts like a block internally so you can safely apply specific widths, heights, and margins!<!-- Forcing a span to act like a large block element -->
<span class="d-block">Block Span</span>
<!-- Forcing a div to sit inline organically -->
<div class="d-inline">Inline Div</div>
<!-- Hybrid display allowing widths and heights -->
<div class="d-inline-block w-50">Hybrid Div</div>To completely and cleanly remove an element from the document flow, apply the .d-none class. This explicitly sets display: none !important in CSS.
<!-- Element is completely eradicated from layout spacing -->
<div class="d-none">Hidden secret content</div>The most powerful feature of Bootstrap's display utilities is the ability to hide or show components exclusively on certain screen sizes. The syntax follows: .d-{breakpoint}-{value}.
For example, if you want to hide a sidebar on mobile phones but permanently show it on large desktop screens, you combine two classes: d-none (hide it universally to start) and d-lg-block (turn it into a block specifically when the screen hits the Large breakpoint of 992px!).
<!-- Hide on mobile, show as block on Desktop (lg) -->
<div class="d-none d-lg-block">Desktop Only Content</div>
<!-- Show on mobile, firmly hide it once screen reaches Tablet size (md) -->
<div class="d-block d-md-none">Mobile Only Content</div>Bootstrap provides d-print-* classes designed strictly to configure how your page appears dynamically when a user attempts to physically print it to paper or save it as a PDF! This is an absolute lifesaver for hiding messy navigation menus or heavy footer graphics on printed documents.
<!-- This entire navigation bar disappears when you print the page! -->
<nav class="navbar d-print-none">
<ul>...</ul>
</nav>
<!-- This message ONLY physically emerges on the printed paper document! -->
<div class="d-none d-print-block">
Thanks for officially printing our specific article!
</div>