Display Utilities

Adjust the display property on any element. To adjust the property at specific breakpoints only, use the breakpoint-specific modifier classes.

<div class="-block">Display block</div>
<div class="-inline-block">Display inline-block</div>
<div class="-none">Display none</div>

Optional classes:

• -block
• -block--xs
• -block--sm
• -block--md
• -block--lg
• -block--xl
• -inline-block
• -inline-block--xs
• -inline-block--sm
• -inline-block--md
• -inline-block--lg
• -inline-block--xl
• -none
• -none--xs
• -none--sm
• -none--md
• -none--lg
• -none--xl
• -vis-hidden
• -sr-only
• -flex
• -flex--xs
• -flex--sm
• -flex--md
• -flex--lg
• -flex--xl