Bootstrap Display & Position Utilities
Display utility classes control an element's CSS display property, such as .d-none to hide it or .d-block to show it as a block. Position utility classes control how an element is positioned on the page.
These utilities are often combined with responsive breakpoint infixes, like .d-md-none, to show or hide elements only at certain screen sizes.
<div class="d-none d-md-block">...</div>
<div class="position-fixed top-0 end-0">...</div>Display utilities
.d-none hides an element, .d-block makes it a block, .d-inline makes it inline, and .d-flex/.d-grid enable flexbox or grid layout. Add a breakpoint like .d-lg-block to apply the rule only from that size up.
Position utilities
.position-static, .position-relative, .position-absolute, .position-fixed, and .position-sticky map directly to the CSS position property, letting you position elements without custom CSS.
<div class="d-none d-md-block bg-info p-2">
Only visible on medium screens and up
</div>This box is hidden on phones but appears on tablets and larger screensd-none hides the element by default, and d-md-block overrides that to show it as a block from the md breakpoint upward.
<button class="btn btn-primary position-fixed bottom-0 end-0 m-3">
Back to Top
</button>A button fixed to the bottom-right corner of the screen, staying in place while scrollingposition-fixed keeps the button anchored to the viewport, and bottom-0/end-0 position it in the corner.
Key points
- .d-none hides an element; .d-block, .d-flex, .d-grid show it in different layout modes.
- Breakpoint infixes like .d-md-none apply display rules responsively.
- .position-{value} maps directly to the CSS position property.
- top-0, bottom-0, start-0, end-0 utilities position elements against their container's edges.