React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Components: Layouts
CSS Helpers
Animation Box Alignment Colors Display
Naming System Examples Hiding Content Spacing Typography
Readme

# Display

Responsive display helper classes enable to change the
`display` CSS property, including hiding the content.

##
Naming System

The classes are named using the format `d-[value]` for `xs` and `d-[breakpoint]-[value]` for `sm`, `md`, `lg`, `xl`, `xxl`, and `xxxl`
breakpoints.

Where `value` is one of:

- `block`
- `flex`
- `inline`
- `inline-block`
- `inline-flex`
- `none`

## Examples

`.d-inline-block`
`.d-inline-block`
<div className="d-inline-block"> <Placeholder> <code>.d-inline-block</code> </Placeholder> </div> <div className="d-inline-block"> <Placeholder> <code>.d-inline-block</code> </Placeholder> </div>

    <div className="d-inline-block">  <Placeholder>    <code>.d-inline-block</code>  </Placeholder></div><div className="d-inline-block">  <Placeholder>    <code>.d-inline-block</code>  </Placeholder></div>

`.d-block`
`.d-block`
<div className="d-block"> <Placeholder> <code>.d-block</code> </Placeholder> </div> <div className="d-block"> <Placeholder> <code>.d-block</code> </Placeholder> </div>

    <div className="d-block">  <Placeholder>    <code>.d-block</code>  </Placeholder></div><div className="d-block">  <Placeholder>    <code>.d-block</code>  </Placeholder></div>

## Hiding Content

To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl,xxxl}-none` classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none` `.d-md-block` will hide the element for all screen sizes except on the `md` size.

This element is hidden on small screens and it becomes visible on screens starting from the `md` breakpoint.

<p className="d-none d-md-block"> This element is hidden on small screens and it becomes visible on screens starting from the <code>md</code> breakpoint. </p>

    <p className="d-none d-md-block">  This element is hidden on small screens and it becomes visible on screens  starting from the <code>md</code> breakpoint.</p>

👉 It's perfectly OK to hide the content with the `.d-none` helper class. Just note that it can be even easier with the less known `hidden` HTML attribute. Browser support is awesome, so why not to use it!

Invisible elements 🙈 . Nothing here!
You cannot see me!
I am invisible, too
Invisible elements <span role="img" aria-label="Cannot see monkey"> 🙈 </span> . Nothing here! <div className="d-none">You cannot see me!</div> <div hidden>I am invisible, too</div>

    Invisible elements<span role="img" aria-label="Cannot see monkey">  🙈</span>. Nothing here!<div className="d-none">You cannot see me!</div><div hidden>I am invisible, too</div>

Next: Spacing →