New This website is new, your feedback will help us to improve it.

Visibility examples

Current breakpoint

Using the responsive visibility classes, the active breakpoint is shown in green below. Resize your device to see this change.

Active breakpoint Extra Small Small Medium Large Extra Large Full HD 
<div class="grid sm:grid-cols-1 md:grid-cols-6 gap-2">
    <!-- Extra Small -->
    <span class="hidden sm:inline text-gray-500 bg-gray-100 p-4">
      <i class="far fa-square"></i> Extra Small
    </span>
    <span class="inline sm:hidden text-green-800 bg-gray-200 p-4">
      <i class="far fa-check-square"></i>
      <span class="sr-only">Active breakpoint</span>
      Extra Small
    </span>
    <!-- Small -->
    <span class="sm:hidden md:inline text-gray-500 bg-gray-100 p-4">
      <i class="far fa-square"></i> Small
    </span>
    <span class="hidden sm:inline md:hidden text-green-800 bg-gray-200 p-4">
      <i class="far fa-check-square"></i>
      <span class="sr-only">Active breakpoint</span>
      Small
    </span>
    <!-- Medium -->
    <span class="md:hidden lg:inline text-gray-500 bg-gray-100 p-4">
      <i class="far fa-square"></i> Medium
    </span>
    <span class="hidden md:inline lg:hidden text-green-800 bg-gray-200 p-4">
      <i class="far fa-check-square"></i>
      <span class="sr-only">Active breakpoint</span>
      Medium
    </span>
    <!-- Large -->
    <span class="lg:hidden xl:inline text-gray-500 bg-gray-100 p-4">
      <i class="far fa-square"></i> Large
    </span>
    <span class="hidden lg:inline xl:hidden text-green-800 bg-gray-200 p-4">
      <i class="far fa-check-square"></i>
      <span class="sr-only">Active breakpoint</span>
      Large
    </span>
    <!-- Extra Large -->
    <span class="xl:hidden fhd:inline text-gray-500 bg-gray-100 p-4">
      <i class="far fa-square"></i> Extra Large
    </span>
    <span class="hidden xl:inline fhd:hidden text-green-800 bg-gray-200 p-4">
      <i class="far fa-check-square"></i>
      <span class="sr-only">Active breakpoint</span>
      Extra Large
    </span>
    <!-- Full HD -->
    <span class="fhd:hidden text-gray-500 bg-gray-100 p-4">
      <i class="far fa-square"></i> Full HD
    </span>
    <span class="hidden fhd:inline text-green-800 bg-gray-200 p-4">
      <i class="far fa-check-square"></i>
      <span class="sr-only">Active breakpoint</span>
      Full HD
    </span>
</div>

Visible classes

The table below shows which classes are visible at each responsive breakpoint. Visible combinations are shown in green.
The active breakpoint is also indicated in the table header.

Active breakpoint Extra Small Small Medium Large Extra Large Full HD
inline sm:hidden Visible Active breakpoint Hidden Hidden Hidden Hidden Hidden
hidden sm:inline md:hidden Hidden Visible Hidden Hidden Hidden Hidden
hidden md:inline lg:hidden Hidden Hidden Visible Hidden Hidden Hidden
hidden lg:inline xl:hidden Hidden Hidden Hidden Visible Hidden Hidden
hidden xl:inline fhd:hidden Hidden Hidden Hidden Hidden Visible Hidden
hidden fhd:inline Hidden Hidden Hidden Hidden Hidden Visible 
<table class="text-sm text-left bsk-table bsk-table-spacing bsk-table-striped w-full ">
<thead>
<tr>
  <th><!-- Intentionally blank --></th>
  <th>
    <!-- Extra Small -->
    <span class="hidden sm:inline text-gray-500">
      <i class="far fa-square"></i> Extra Small
    </span>
    <span class="inline sm:hidden text-gray-800">
      <i class="far fa-check-square"></i>
      <span class="sr-only">Active breakpoint</span>
      Extra Small
    </span>
  </th>
  <th>
    <!-- Small -->
    <span class="sm:hidden md:inline text-gray-500">
      <i class="far fa-square"></i> Small
    </span>
    <span class="hidden sm:inline md:hidden text-gray-800">
      <i class="far fa-check-square"></i>
      <span class="sr-only">Active breakpoint</span>
      Small
    </span>
  </th>
  <th>
    <!-- Medium -->
    <span class="md:hidden lg:inline text-gray-500">
      <i class="far fa-square"></i> Medium
    </span>
    <span class="hidden md:inline lg:hidden text-gray-800">
      <i class="far fa-check-square"></i>
      <span class="sr-only">Active breakpoint</span>
      Medium
    </span>
  </th>
  <th>
    <!-- Large -->
    <span class="lg:hidden xl:inline text-gray-500">
      <i class="far fa-square"></i> Large
    </span>
    <span class="hidden lg:inline xl:hidden text-gray-800">
      <i class="far fa-check-square"></i>
      <span class="sr-only">Active breakpoint</span>
      Large
    </span>
  </th>
  <th>
    <!-- Extra Large -->
    <span class="xl:hidden fhd:inline text-gray-500">
      <i class="far fa-square"></i> Extra Large
    </span>
    <span class="hidden xl:inline fhd:hidden text-gray-800">
      <i class="far fa-check-square"></i>
      <span class="sr-only">Active breakpoint</span>
      Extra Large
    </span>
  </th>
  <th>
    <!-- Full HD -->
    <span class="fhd:hidden text-gray-500">
      <i class="far fa-square"></i> Full HD
    </span>
    <span class="hidden fhd:inline text-gray-800">
      <i class="far fa-check-square"></i>
      <span class="sr-only">Active breakpoint</span>
      Full HD
    </span>
  </th>
</tr>
</thead>

<tbody>
<tr>
  <th><code>inline sm:hidden</code></th>
  <td>
    <span class="inline sm:hidden text-green-600">
        <i class="far fa-eye"></i> Visible
        <span class="sr-only">Active breakpoint</span>
    </span>
    <span class="hidden sm:inline text-gray-500">
      <i class="far fa-eye"></i> Visible
    </span>
  </td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
</tr>
<tr>
  <th><code>hidden sm:inline md:hidden</code></th>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td>
    <span class="hidden sm:inline md:hidden text-green-600">
        <i class="far fa-eye"></i> Visible
        <span class="sr-only">Active breakpoint</span>
    </span>
    <span class="sm:hidden md:inline text-gray-500">
      <i class="far fa-eye"></i> Visible
    </span>
  </td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
</tr>
<tr>
  <th><code>hidden md:inline lg:hidden</code></th>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td>
    <span class="hidden md:inline lg:hidden text-green-600">
        <i class="far fa-eye"></i> Visible
        <span class="sr-only">Active breakpoint</span>
    </span>
    <span class="md:hidden lg:inline text-gray-500">
      <i class="far fa-eye"></i> Visible
    </span>
  </td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
</tr>
<tr>
  <th><code>hidden lg:inline xl:hidden</code></th>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td>
    <span class="hidden lg:inline xl:hidden text-green-600">
        <i class="far fa-eye"></i> Visible
        <span class="sr-only">Active breakpoint</span>
    </span>
    <span class="lg:hidden xl:inline text-gray-500">
      <i class="far fa-eye"></i> Visible
    </span>
  </td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
</tr>
<tr>
  <th><code>hidden xl:inline fhd:hidden</code></th>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td>
    <span class="hidden xl:inline fhd:hidden text-green-600">
        <i class="far fa-eye"></i> Visible
        <span class="sr-only">Active breakpoint</span>
    </span>
    <span class="xl:hidden fhd:inline text-gray-500">
      <i class="far fa-eye"></i> Visible
    </span>
  </td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
</tr>
<tr>
  <th><code>hidden fhd:inline</code></th>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td><span class="text-gray-300"><i class="far fa-low-vision"></i> Hidden</span></td>
  <td>
    <span class="hidden fhd:inline text-green-600">
        <i class="far fa-eye"></i> Visible
        <span class="sr-only">Active breakpoint</span>
    </span>
    <span class="fhd:hidden text-gray-500">
      <i class="far fa-eye"></i> Visible
    </span>
  </td>
</tr>
</tbody>
</table>

Hidden classes

The table below shows which classes are hidden at each responsive breakpoint. Hidden combinations are shown in green.
The active breakpoint is also indicated in the table header.

Active breakpoint Extra Small Small Medium Large Extra Large Full HD
hidden sm:inline Hidden Active breakpoint Visible Visible Visible Visible Visible
sm:hidden md:inline Visible Hidden Visible Visible Visible Visible
md:hidden lg:inline Visible Visible Hidden Visible Visible Visible
lg:hidden xl:inline Visible Visible Visible Hidden Visible Visible
xl:hidden fhd:inline Visible Visible Visible Visible Hidden Visible
fhd:hidden Visible Visible Visible Visible Visible Hidden 
<table class="w-full text-sm text-left bsk-table-spacing">
<thead>
  <tr>
    <th><!-- Intentionally blank --></th>
    <th>
      <!-- Extra Small -->
      <span class="hidden sm:inline text-gray-500">
        <i class="far fa-square"></i> Extra Small
      </span>
      <span class="inline sm:hidden text-gray-800">
        <i class="far fa-check-square"></i>
        <span class="sr-only">Active breakpoint</span>
        Extra Small
      </span>
    </th>
    <th>
      <!-- Small -->
      <span class="sm:hidden md:inline text-gray-500">
        <i class="far fa-square"></i> Small
      </span>
      <span class="hidden sm:inline md:hidden text-gray-800">
        <i class="far fa-check-square"></i>
        <span class="sr-only">Active breakpoint</span>
        Small
      </span>
    </th>
    <th>
      <!-- Medium -->
      <span class="md:hidden lg:inline text-gray-500">
        <i class="far fa-square"></i> Medium
      </span>
      <span class="hidden md:inline lg:hidden text-gray-800">
        <i class="far fa-check-square"></i>
        <span class="sr-only">Active breakpoint</span>
        Medium
      </span>
    </th>
    <th>
      <!-- Large -->
      <span class="lg:hidden xl:inline text-gray-500">
        <i class="far fa-square"></i> Large
      </span>
      <span class="hidden lg:inline xl:hidden text-gray-800">
        <i class="far fa-check-square"></i>
        <span class="sr-only">Active breakpoint</span>
        Large
      </span>
    </th>
    <th>
      <!-- Extra Large -->
      <span class="xl:hidden fhd:inline text-gray-500">
        <i class="far fa-square"></i> Extra Large
      </span>
      <span class="hidden xl:inline fhd:hidden text-gray-800">
        <i class="far fa-check-square"></i>
        <span class="sr-only">Active breakpoint</span>
        Extra Large
      </span>
    </th>
    <th>
      <!-- Full HD -->
      <span class="fhd:hidden text-gray-500">
        <i class="far fa-square"></i> Full HD
      </span>
      <span class="hidden fhd:inline text-gray-800">
        <i class="far fa-check-square"></i>
        <span class="sr-only">Active breakpoint</span>
        Full HD
      </span>
    </th>
  </tr>
</thead>

<tbody>
  <tr class="bg-gray-200">
    <th><code>hidden sm:inline</code></th>
    <td>
      <span class="inline sm:hidden text-red-300">
          <i class="far fa-low-vision"></i> Hidden
          <span class="sr-only">Active breakpoint</span>
      </span>
      <span class="hidden sm:inline text-gray-300">
        <i class="far fa-low-vision"></i> Hidden
      </span>
    </td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
  </tr>
  <tr>
    <th><code>sm:hidden md:inline</code></th>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td>
      <span class="hidden sm:inline md:hidden text-red-300">
          <i class="far fa-low-vision"></i> Hidden
          <span class="sr-only">Active breakpoint</span>
      </span>
      <span class="sm:hidden md:inline text-gray-300">
        <i class="far fa-low-vision"></i> Hidden
      </span>
    </td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
  </tr>
  <tr class="bg-gray-200">
    <th><code>md:hidden lg:inline</code></th>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td>
      <span class="hidden md:inline lg:hidden text-red-300">
          <i class="far fa-low-vision"></i> Hidden
          <span class="sr-only">Active breakpoint</span>
      </span>
      <span class="md:hidden lg:inline text-gray-300">
        <i class="far fa-low-vision"></i> Hidden
      </span>
    </td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
  </tr>
  <tr>
    <th><code>lg:hidden xl:inline</code></th>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td>
      <span class="hidden lg:inline xl:hidden text-red-300">
          <i class="far fa-low-vision"></i> Hidden
          <span class="sr-only">Active breakpoint</span>
      </span>
      <span class="lg:hidden xl:inline text-gray-300">
        <i class="far fa-low-vision"></i> Hidden
      </span>
    </td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
  </tr>
  <tr class="bg-gray-200">
    <th><code>xl:hidden fhd:inline</code></th>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td>
      <span class="hidden xl:inline fhd:hidden text-red-300">
          <i class="far fa-low-vision"></i> Hidden
          <span class="sr-only">Active breakpoint</span>
      </span>
      <span class="xl:hidden fhd:inline text-gray-300">
        <i class="far fa-low-vision"></i> Hidden
      </span>
    </td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
  </tr>
  <tr>
    <th><code>fhd:hidden</code></th>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td><span class="text-gray-500"><i class="far fa-eye"></i> Visible</span></td>
    <td>
      <span class="hidden fhd:inline text-red-300">
          <i class="far fa-low-vision"></i> Hidden
          <span class="sr-only">Active breakpoint</span>
      </span>
      <span class="fhd:hidden text-gray-300">
        <i class="far fa-low-vision"></i> Hidden
      </span>
    </td>
  </tr>
</tbody>
</table>