<p>Display utility classes that apply to all breakpoints, from <code>xs </code>to <code>xxl </code>, have no breakpoint abbreviation in them. This is because those classes are applied from <code>min-width: 0;</code>and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.</p>
<p class="mt-4">As such, the classes are named using the format:</p>
<ul>
  <li><code>.block</code> for <code>xs </code></li>
  <li><code>.{breakpoint}:block</code> for <code> sm</code>,<code> md</code>,<code> lg</code>,<code> xl</code>, and<code> xxl</code>,</li>
</ul>
<p class="mt-4">Where value is one of:</p>
<ul>
  <li><code>none</code></li>
  <li><code>inline</code></li>
  <li><code>inline-block</code></li>
  <li><code>block</code></li>
  <li><code>table</code></li>
  <li><code>table-cell</code></li>
  <li><code>table-row</code></li>
  <li><code>flex</code></li>
  <li><code>inline-flex</code></li>
  <li><code>grid</code></li>
  <li><code>inline-grid</code></li>
  <li><code>contents </code><span>etc.</span></li>
</ul>
<p>The media queries affect screen widths with the given breakpoint or larger. For example, <code>div(class="lg:hidden") </code>sets <code>display: none;</code>on both <code>lg </code>and <code>xl </code>screens.</p>

<div class="inline bg-primary p-2 text-white">d-inline</div>
<div class="block bg-primary p-2 text-white mt-4">d-block</div>

<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 elements responsively for each screen size.</p>
<p>To hide elements simply use the<code>.hidden </code>class or one of the<code>.{sm,md,lg,xl,xxl}:hidden </code>classes for any responsive screen variation.</p>
<table class="table table-bordered">
  <thead>
    <tr>
      <th class="ps-2">Screen Size</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="ps-2">Hidden on all</td>
      <td><code>.hidden</code></td>
    </tr>
    <tr>
      <td class="ps-2">Hidden only on xs</td>
      <td><code>.hidden .sm:block</code></td>
    </tr>
    <tr>
      <td class="ps-2">Hidden only on sm</td>
      <td><code>sm:hidden md:block </code></td>
    </tr>
    <tr>
      <td class="ps-2">Hidden only on md</td>
      <td><code>md:hidden lg:block </code></td>
    </tr>
    <tr>
      <td class="ps-2">Hidden only on lg</td>
      <td><code>lg:hidden xl:block </code></td>
    </tr>
    <tr>
      <td class="ps-2">Hidden only on xl</td>
      <td><code>xl:hidden</code></td>
    </tr>
    <tr>
      <td class="ps-2">Visible on all</td>
      <td><code>.block</code></td>
    </tr>
    <tr>
      <td class="ps-2">Visible only on xs</td>
      <td><code>.block .sm:none</code></td>
    </tr>
    <tr>
      <td class="ps-2">Visible only on sm</td>
      <td><code>.hidden .sm:block .md:none</code></td>
    </tr>
    <tr>
      <td class="ps-2">Visible only on md</td>
      <td><code>.hidden .md:block .lg:none</code></td>
    </tr>
    <tr>
      <td class="ps-2">Visible only on lg</td>
      <td><code>.hidden .lg:block .xl:none</code></td>
    </tr>
    <tr>
      <td class="ps-2">Visible only on xl</td>
      <td><code>.hidden .xl:block</code></td>
    </tr>
  </tbody>
</table>