Responsive design is not only about column widths; it is also about which elements exist at each screen size and how they are positioned. Bootstrap's display utilities toggle display per breakpoint, visibility helpers hide things while keeping them accessible, and position utilities place elements without custom CSS. After this lesson you will be able to build mobile-only controls, sticky headers and corner badges using classes alone.
The pattern is d-{breakpoint}-{value}. Values are none, inline, inline-block, block, grid, inline-grid, table, table-row, table-cell, flex and inline-flex.
Because Bootstrap is mobile-first, a class without a breakpoint applies everywhere and each breakpoint class applies from that width upwards:
<div class="d-none d-md-block">Hidden on phones, block from 768px up</div>
<div class="d-block d-md-none">Only on phones and small tablets</div>
<span class="d-inline d-lg-block">Inline until lg, then block</span>A quick reference for hiding at specific ranges:
| Goal | Classes |
|---|---|
| Hide on all | d-none |
| Hide only on xs | d-none d-sm-block |
| Hide only on md | d-md-none d-lg-block |
| Show only on lg | d-none d-lg-block d-xl-none |
| Hide on lg and up | d-lg-none |
Replace block with flex or inline depending on what the element should be when visible.
d-print-{value} controls display only when printing. Combine it with screen classes:
<button class="btn btn-secondary d-print-none">Download PDF</button>
<p class="d-none d-print-block">Printed on request from the customer portal.</p>display: none removes an element from layout and from the accessibility tree. Two other helpers behave differently:
.invisible sets visibility: hidden: the element keeps its space but cannot be seen or clicked..visually-hidden hides the element from sighted users while screen readers still read it; use it for labels and status text..visually-hidden-focusable stays hidden until it receives keyboard focus, which is how "skip to main content" links are built.<a href="#main" class="visually-hidden-focusable">Skip to main content</a>
<label for="q" class="visually-hidden">Search</label>
<input id="q" class="form-control" placeholder="Search docs">| Class | CSS |
|---|---|
| position-static | position: static |
| position-relative | position: relative |
| position-absolute | position: absolute |
| position-fixed | position: fixed |
| position-sticky | position: sticky |
Combine them with edge classes top-0, top-50, top-100, bottom-*, start-* and end-*, which set the offset as a percentage:
<div class="position-relative border" style="height: 200px">
<span class="position-absolute top-0 end-0 m-2 badge bg-success">New</span>
<span class="position-absolute bottom-0 start-0 m-2 text-muted">Bottom left</span>
</div>translate-middletop-50 start-50 places the element's top-left corner at the center. translate-middle shifts it back by half its own size, which centers it exactly. translate-middle-x and translate-middle-y shift on one axis only:
<div class="position-relative bg-light" style="height: 240px">
<button class="btn btn-primary position-absolute top-50 start-50 translate-middle">
Play
</button>
</div>The same trick puts a notification badge on a button corner, as in the sample code at the top of this lesson.
Bootstrap ships ready-made classes for page-level positioning:
.fixed-top and .fixed-bottom: pinned to the viewport with z-index: 1030. Add body padding so content is not hidden behind them..sticky-top: position: sticky; top: 0 with a high z-index, so an element scrolls normally until it reaches the top and then stays..sticky-bottom: the same at the bottom edge.sticky-md-top, sticky-lg-bottom, and so on.<header class="sticky-top bg-body border-bottom py-2">Sticky header</header>
<aside class="col-lg-3 sticky-lg-top" style="top: 4rem">Sticky sidebar from lg up</aside>Sticky positioning stops working if any ancestor has overflow: hidden or overflow: auto, which is the most common reason a sticky sidebar "does nothing".
d-md-none alone hides from md up but says nothing about smaller screens; the element keeps its default display there, which is usually what you want, but be explicit when it is not.invisible to remove content. It still takes space; use d-none unless you specifically need the space reserved.position-relative to the container or the child will be placed relative to the page.fixed-top. It removes the element from flow; add padding-top on <body> equal to the header height.Which classes hide an element only on extra-small screens?
d-{bp}-{value} sets display from a breakpoint upward; combine d-none with d-md-block to hide or show per range.d-print-* controls display in print; .visually-hidden keeps content for screen readers; .invisible reserves space.position-* plus top/bottom/start/end-{0|50|100} position elements; add position-relative to the parent.translate-middle centers absolutely positioned elements and builds corner badges..fixed-top, .sticky-top and their responsive sticky variants handle headers and sidebars; sticky breaks inside overflow containers.Next lesson: Flexbox Utilities - build any one-dimensional layout with d-flex, direction, wrap, justify, align and order classes.