<p><strong>Common display values</strong></p>

<p>The <strong>display property</strong> accepts a handful of values and we support many of them with utility classes. We purposefully don’t provide every value as a utility, so here’s what we support:</p>

<ul>
    <li><code>.d-none</code></li>
    <li><code>.d-inline</code></li>
    <li><code>.d-inline-block</code></li>
    <li><code>.d-block</code></li>
    <li><code>.d-table</code></li>
    <li><code>.d-table-cell</code></li>
    <li><code>.d-flex</code></li>
    <li><code>.d-inline-flex</code></li>
</ul>

<p>Put them to use by applying any of the classes to an element of your choice. For example, here’s how you could use the inline, block, or inline-block utilities (the same applies to the other classes).</p>

<div class="mdl-example">
	<div class="container">
        <div class="d-inline bg-green">d-inline</div>
        <div class="d-inline bg-green">d-inline</div>
	</div>
<pre>
&lt;div class="d-inline bg-green">d-inline&lt;/div>
&lt;div class="d-inline bg-green">d-inline&lt;/div>
</pre>
</div>

<p></p>

<div class="mdl-example">
    <div class="container">
        <div class="d-block bg-orange">d-block</div>
    </div>
<pre>
&lt;div class="d-block bg-orange">d-block&lt;/div>
</pre>
</div>

<p></p>

<div class="mdl-example">
    <div class="container">
        <div class="d-inline-block bg-red">d-inline-block</div>
        <div class="d-inline-block bg-red">d-inline-block</div>
    </div>
<pre>
&lt;div class="d-inline-block bg-red">d-inline-block&lt;/div>
&lt;div class="d-inline-block bg-red">d-inline-block&lt;/div>
</pre>
</div>

<p>Responsive variations also exist for every single utility mentioned above.</p>

<ul>
    <li><code>.d-none</code></li>
    <li><code>.d-inline</code></li>
    <li><code>.d-inline-block</code></li>
    <li><code>.d-block</code></li>
    <li><code>.d-table</code></li>
    <li><code>.d-table-cell</code></li>
    <li><code>.d-flex</code></li>
    <li><code>.d-inline-flex</code></li>
    <li><code>.d-sm-none</code></li>
    <li><code>.d-sm-inline</code></li>
    <li><code>.d-sm-inline-block</code></li>
    <li><code>.d-sm-block</code></li>
    <li><code>.d-sm-table</code></li>
    <li><code>.d-sm-table-cell</code></li>
    <li><code>.d-sm-flex</code></li>
    <li><code>.d-sm-inline-flex</code></li>
    <li><code>.d-md-none</code></li>
    <li><code>.d-md-inline</code></li>
    <li><code>.d-md-inline-block</code></li>
    <li><code>.d-md-block</code></li>
    <li><code>.d-md-table</code></li>
    <li><code>.d-md-table-cell</code></li>
    <li><code>.d-md-flex</code></li>
    <li><code>.d-md-inline-flex</code></li>
    <li><code>.d-lg-none</code></li>
    <li><code>.d-lg-inline</code></li>
    <li><code>.d-lg-inline-block</code></li>
    <li><code>.d-lg-block</code></li>
    <li><code>.d-lg-table</code></li>
    <li><code>.d-lg-table-cell</code></li>
    <li><code>.d-lg-flex</code></li>
    <li><code>.d-lg-inline-flex</code></li>
    <li><code>.d-xl-none</code></li>
    <li><code>.d-xl-inline</code></li>
    <li><code>.d-xl-inline-block</code></li>
    <li><code>.d-xl-block</code></li>
    <li><code>.d-xl-table</code></li>
    <li><code>.d-xl-table-cell</code></li>
    <li><code>.d-xl-flex</code></li>
    <li><code>.d-xl-inline-flex</code></li>
</ul>

<p><strong>Hiding Elements</strong></p>

<p>For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.</p>
<p n:syntax="off">To hide elements simply use the <strong>.d-none</strong> class or one of the <strong>.d-{sm,md,lg,xl}-none</strong> classes for any responsive screen variation.</p>
<p>To show an element only on a given interval of screen sizes you can combine one <strong>.d-*-none</strong> class with a <strong>.d-*-*</strong> class, for example <strong>.d-none.d-md-block.d-xl-none</strong> will hide the element for all screen sizes except on medium and large devices.</p>

<table>
    <thead>
        <tr>
        <th>Screen Size</th>
        <th>Class</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>Hidden on all</td>
        <td><code>d-none</code></td>
        </tr>
        <tr>
        <td>Hidden only on xs</td>
        <td><code>d-none d-sm-block</code></td>
        </tr>
        <tr>
        <td>Hidden only on sm</td>
        <td><code>d-sm-none d-md-block</code></td>
        </tr>
        <tr>
        <td>Hidden only on md</td>
        <td><code>d-md-none d-lg-block</code></td>
        </tr>
        <tr>
        <td>Hidden only on lg</td>
        <td><code>d-lg-none d-xl-block</code></td>
        </tr>
        <tr>
        <td>Hidden only on xl</td>
        <td><code>d-xl-none</code></td>
        </tr>
        <tr>
        <td>Visible on all</td>
        <td><code>d-block</code></td>
        </tr>
        <tr>
        <td>Visible only on xs</td>
        <td><code>d-block d-sm-none</code></td>
        </tr>
        <tr>
        <td>Visible only on sm</td>
        <td><code>d-none d-sm-block d-md-none</code></td>
        </tr>
        <tr>
        <td>Visible only on md</td>
        <td><code>d-none d-md-block d-lg-none</code></td>
        </tr>
        <tr>
        <td>Visible only on lg</td>
        <td><code>d-none d-lg-block d-xl-none</code></td>
        </tr>
        <tr>
        <td>Visible only on xl</td>
        <td><code>d-none d-xl-block</code></td>
        </tr>
    </tbody>
</table>

<p><strong>Display in print</strong></p>

<p>Change the <strong>display</strong> value of elements when printing with our print display utilities.</p>

<table>
    <thead>
        <tr>
        <th>Class</th>
        <th>Print style</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td><code>.d-print-block</code></td>
        <td>Applies <code>display: block</code> to the element when printing</td>
        </tr>
        <tr>
        <td><code>.d-print-inline</code></td>
        <td>Applies <code>display: inline</code> to the element when printing</td>
        </tr>
        <tr>
        <td><code>.d-print-inline-block</code></td>
        <td>Applies <code>display: inline-block</code> to the element when printing</td>
        </tr>
        <tr>
        <td><code>.d-print-none</code></td>
        <td>Applies <code>display: none</code> to the element when printing</td>
        </tr>
    </tbody>
</table>

// stylelint-disable declaration-no-important

//
// Utilities for common `display` values
//

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $value in $displays {
      .d#{$infix}-#{$value} { display: $value !important; }
    }
  }
}


//
// Utilities for toggling `display` in print
//

@media print {
  @each $value in $displays {
    .d-print-#{$value} { display: $value !important; }
  }
}