Usage
Use BB Display classes to control the display property of elements with responsive breakpoint support.
<!-- Basic display utilities -->
<div class="bb-d-flex">Display flex</div>
<div class="bb-d-none">Display none</div>
<div class="bb-d-block">Display block</div>
<div class="bb-d-inline">Display inline</div>
Available classes
Basic display classes
- bb-d-none: Sets display: none
- bb-d-inline: Sets display: inline
- bb-d-inline-block: Sets display: inline-block
- bb-d-block: Sets display: block
- bb-d-table: Sets display: table
- bb-d-table-row: Sets display: table-row
- bb-d-table-cell: Sets display: table-cell
- bb-d-flex: Sets display: flex
- bb-d-inline-flex: Sets display: inline-flex
Basic display control examples
<!-- Show/hide elements -->
<div class="bb-d-block">Always visible block element</div>
<div class="bb-d-none">Hidden element</div>
<span class="bb-d-inline-block">Inline-block span</span>
Flexbox utilities examples
<!-- Flex containers -->
<div class="bb-d-flex">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
<!-- Responsive flex container -->
<div class="bb-d-block bb-d-md-flex">
<div>Stacked on mobile, side-by-side on tablet+</div>
<div>Second item</div>
</div>
<!-- Inline flex -->
<span class="bb-d-inline-flex">
<span>Inline</span>
<span>Flex</span>
<span>Container</span>
</span>
Table display example
<!-- Table-like layout using CSS -->
<div class="bb-d-table">
<div class="bb-d-table-row">
<div class="bb-d-table-cell">Cell 1</div>
<div class="bb-d-table-cell">Cell 2</div>
<div class="bb-d-table-cell">Cell 3</div>
</div>
</div>
Responsive display classes
All display classes support responsive breakpoint modifiers using the format bb-d-{breakpoint}-{display}:
Small (sm) and up
bb-d-sm-none, bb-d-sm-inline, bb-d-sm-block, bb-d-sm-flex, etc.
Medium (md) and up
bb-d-md-none, bb-d-md-inline, bb-d-md-block, bb-d-md-flex, etc.
Large (lg) and up
bb-d-lg-none, bb-d-lg-inline, bb-d-lg-block, bb-d-lg-flex, etc.
Extra large (xl) and up
bb-d-xl-none, bb-d-xl-inline, bb-d-xl-block, bb-d-xl-flex, etc.
<!-- Hide on mobile, show on medium screens and up -->
<div class="bb-d-none bb-d-md-block">
<p>This content is hidden on mobile but visible on tablets and desktop.</p>
</div>
<!-- Show on mobile, hide on large screens -->
<div class="bb-d-block bb-d-lg-none">
<button>Mobile-only button</button>
</div>
<!-- Different display types at different breakpoints -->
<div class="bb-d-block bb-d-md-flex bb-d-lg-inline-flex">
<span>Block on mobile, flex on tablet, inline-flex on desktop</span>
</div>
<!-- Navigation that adapts to screen size -->
<nav class="bb-d-none bb-d-md-flex">
<!-- Desktop navigation -->
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<button class="bb-d-block bb-d-md-none">
<!-- Mobile menu button -->
Menu
</button>
<!-- Card layout that stacks on mobile -->
<div class="bb-d-block bb-d-lg-flex">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
Print display classes
Special classes that only apply when printing:
- bb-d-print-none: Hide when printing
- bb-d-print-inline: Display inline when printing
- bb-d-print-block: Display block when printing
- bb-d-print-flex: Display flex when printing
- bb-d-print-inline-flex: Display inline-flex when printing
And all other display values with bb-d-print- prefix.
<!-- Hide from print -->
<div class="bb-d-print-none">
<button>This button won't appear when printing</button>
</div>
<!-- Show only in print -->
<div class="bb-d-none bb-d-print-block">
<p>This message only appears when printing the page.</p>
</div>
<!-- Different display for print -->
<div class="bb-d-flex bb-d-print-block">
<span>Flex on screen, block when printing</span>
</div>