Display

Responsive display utility classes allow you to quickly set an element’s display property to any valid value. The format is:

.d-[value]-[breakpoint]

Above, value is one of:

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

The breakpoint suffix specifies the minimum screen size to apply the rule. For example, .d-none.d-block-md would hide the element at xs and sm sizes and show it at md and up.

Note: this feature is enabled by default and adds 95 lines of CSS (approx 2kb) to the compiled CSS. You can toggle it off by setting $enable-display-utilities: false before importing Phenotypes.

Adapted from Bootstrap 4.

Related:

<div>
    <p><code class="text-color-hint">.d-none</code>
    </p>
    <div class="d-none">I’m hidden at xs size and up</div>
    <hr/>
    <p><code class="text-color-hint">.d-none-sm</code>
    </p>
    <div class="d-none-sm">I’m hidden at sm size and up</div>
    <hr/>
    <p><code class="text-color-hint">.d-none-md</code>
    </p>
    <div class="d-none-md">I’m hidden at md size and up</div>
    <hr/>
    <p><code class="text-color-hint">.d-none-lg</code>
    </p>
    <div class="d-none-lg">I’m hidden at lg size and up</div>
    <hr/>
    <p><code class="text-color-hint">.d-none-xl</code>
    </p>
    <div class="d-none-xl">I’m hidden at xl size and up</div>
    <hr/>
    <p><code class="text-color-hint">.d-flex-sm</code>
    </p>
    <div class="d-flex-sm">
        <div>Column 1</div>
        <div>Column 2</div>
        <div>Column 3</div>
    </div>
</div>
import * as React from 'react';

function DisplayUtilities() {
  return (
    <div>
      <p>
        <code className="text-color-hint">.d-none</code>
      </p>
      <div className="d-none">I’m hidden at xs size and up</div>
      <hr />
      <p>
        <code className="text-color-hint">.d-none-sm</code>
      </p>
      <div className="d-none-sm">I’m hidden at sm size and up</div>
      <hr />
      <p>
        <code className="text-color-hint">.d-none-md</code>
      </p>
      <div className="d-none-md">I’m hidden at md size and up</div>
      <hr />
      <p>
        <code className="text-color-hint">.d-none-lg</code>
      </p>
      <div className="d-none-lg">I’m hidden at lg size and up</div>
      <hr />
      <p>
        <code className="text-color-hint">.d-none-xl</code>
      </p>
      <div className="d-none-xl">I’m hidden at xl size and up</div>
      <hr />
      <p>
        <code className="text-color-hint">.d-flex-sm</code>
      </p>
      <div className="d-flex-sm">
        <div>Column 1</div>
        <div>Column 2</div>
        <div>Column 3</div>
      </div>
    </div>
  );
}

export default DisplayUtilities;
/* No context defined for this component. */
  • Content:
    // Utilities for common `display` values
    // Based on Bootstrap 4
    // https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_display.scss
    //
    //
    // Example: <div class="d-none d-block-md"> would be hidden at xs and sm sizes,
    // and then made visible again (display: block) at md, lg, and xl sizes.
    //
    // scss-lint:disable ImportantRule, SpaceBeforeBrace
    
    @if $enable-display-utilities {
      @each $breakpoint in map-keys($grid-breakpoints) {
        @include media-breakpoint-up($breakpoint) {
          $suffix: breakpoint-suffix($breakpoint, $grid-breakpoints);
    
          .d-none#{$suffix}         { display: none !important; }
          .d-inline#{$suffix}       { display: inline !important; }
          .d-inline-block#{$suffix} { display: inline-block !important; }
          .d-block#{$suffix}        { display: block !important; }
          .d-table#{$suffix}        { display: table !important; }
          .d-table-cell#{$suffix}   { display: table-cell !important; }
          .d-flex#{$suffix}         { display: flex !important; }
          .d-inline-flex#{$suffix}  { display: inline-flex !important; }
        }
      }
    }
    
  • URL: /components/raw/display/_display.scss
  • Filesystem Path: library/utilities/display/_display.scss
  • Size: 1.1 KB