Display utilities
Display utilities show, hide and change how elements are laid out, at any breakpoint.
In this page:
Syntax
<div class="d-none d-md-block">shown from md up</div>
<div class="d-flex">flex container</div>Display utilities
Classes like .d-none, .d-block, .d-inline, .d-inline-block, .d-flex and .d-grid set the display property. Breakpoint versions such as .d-none .d-md-block hide an element on small screens and show it from md up. Use .d-print-none for print styles.
Note:
d-none d-md-block hides below md and shows from md up.
Example: Display utilities
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="d-block d-md-none bg-warning-subtle p-2 mb-2">Visible below md only</div>
<div class="d-none d-md-block bg-success-subtle p-2 mb-2">Visible from md up</div>
<span class="d-inline-block bg-info-subtle p-2">inline-block</span> <span class="d-inline-block bg-info-subtle p-2">inline-block</span>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Applying d-none without a show class at another breakpoint
- Confusing display with visibility
- Using inline CSS display
Chapter Summary
- d-none, d-block, d-inline, d-flex
- Breakpoint versions like d-md-block
- Combine d-none with d-{bp}-block to show later
- d-print-* for printing
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: