<< Go back

Visibility breakpoints visible

Visible combinations are shown in green.

The active breakpoint is indicated in the table header.

	Extra Small Active breakpoint Extra Small	Small Active breakpoint Small	Medium Active breakpoint Medium	Large Active breakpoint Large	Extra Large Active breakpoint Extra Large	Full HD Active breakpoint Full HD
`inline sm:hidden`	Visible Active breakpoint Visible	Hidden	Hidden	Hidden	Hidden	Hidden
`hidden sm:inline md:hidden`	Hidden	Visible Active breakpoint Visible	Hidden	Hidden	Hidden	Hidden
`hidden md:inline lg:hidden`	Hidden	Hidden	Visible Active breakpoint Visible	Hidden	Hidden	Hidden
`hidden lg:inline xl:hidden`	Hidden	Hidden	Hidden	Visible Active breakpoint Visible	Hidden	Hidden
`hidden xl:inline fhd:hidden`	Hidden	Hidden	Hidden	Hidden	Visible Active breakpoint Visible	Hidden
`hidden fhd:inline`	Hidden	Hidden	Hidden	Hidden	Hidden	Visible Active breakpoint 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>

Notes:

This sample relies on the optional font awesome icon font