Display Utilities

The display utilities included with the KW UI Kit directly align with Bootstrap's Display Utilities.

They allow you to easily and responsively toggle the display property of elements.

Notation

Display utilities that apply to all breakpoints (from xs to lg) should not have a breakpoint abbreviation in them. This is because those classes are applied for every screen size and are not bound by a media query.

The syntax for usage is as follows:

// Without breakpoint
.d-{value}
// With breakpoint
.d-{breakpoint}-{value}

The value options are:

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

Examples

// Display flex on all breakpoints
<div className="d-flex"></div>
// Display inline on small
<div className="d-sm-inline"></div>
// Hidden only on xs
<div className="d-none d-sm-block"></div>
// Visible only on xs
<div className="d-block d-sm-none"></div>