Components

## Display Utility

Quickly and responsively toggle the display value of components and more with our display utilities. Classes can be combined for various effects as you need.

#### Basic Uses

These utilities classes allow to set display property of an element.

Class Reference | Name
--- | ---
`.d-{name}` | none | inline | inline-block | block | table | table-cell | table-row | flex | inline-flex
`.d-{breakpoint}-{name}` | Use `{breakpoint}` as `sm, md, lg, and xl` to effect on screen width.
The media queries effect screen widths with the given breakpoint or larger. For example, `.d-lg-none` sets `display: none;` on both `lg` and `xl` screens.

Uses Example

    <div class="d-block"> ... </div>

#### Hiding elements

For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device.

Class Reference | Screen Size
--- | ---
`.d-none` | Hidden on all
`.d-none .d-sm-block` | Hidden only on xs
`.d-sm-none .d-md-block` | Hidden only on sm
`.d-md-none .d-lg-block` | Hidden only on md
`.d-lg-none .d-xl-block` | Hidden only on lg
`.d-xl-none` | Hidden only on xl
`.d-block` | Visible on all
`.d-block .d-sm-none` | Visible only on xs
`.d-none .d-sm-block .d-md-none` | Visible only on sm
`.d-none .d-md-block .d-lg-none` | Visible only on md
`.d-none .d-lg-block .d-xl-none` | Visible only on lg
`.d-none .d-xl-block` | Visible only on xl

Uses Example

    <div class="d-none d-sm-block"> ... </div>