Source code Sponsor

Skeleton

Skeleton is used to reserve space for content that soon will appear in a layout.

Skeleton line

Skeleton lines can contain have lines of text. Their length is different and depends on the text-align property.

<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>

However, it may be useful, however, to specify the full width in order to fit the content more effectively.

<div class="skeleton-line skeleton-line-full"></div>
<div class="skeleton-line skeleton-line-full"></div>
<div class="skeleton-line skeleton-line-full"></div>
<div class="skeleton-line skeleton-line-full"></div>

You can also move the lines to right or to center:

<div class="text-end">
  <div class="skeleton-line"></div>
  <div class="skeleton-line"></div>
  <div class="skeleton-line"></div>
</div>
<div class="text-center mt-3">
  <div class="skeleton-line"></div>
  <div class="skeleton-line"></div>
  <div class="skeleton-line"></div>
</div>

Skeleton heading

A skeleton can contain also a header element looks like header:

<div class="skeleton-heading"></div>
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>

Skeleton avatar

You can make your skeleton item look like an avatar.

<div class="row">
  <div class="col-auto">
    <div class="skeleton-avatar"></div>
  </div>
  <div class="col">
    <div class="skeleton-line"></div>
    <div class="skeleton-line"></div>
  </div>
</div>

The size of avatars is exactly the same as a regular avatar.

<div class="skeleton-avatar skeleton-avatar-xl"></div>
<div class="skeleton-avatar skeleton-avatar-lg"></div>
<div class="skeleton-avatar skeleton-avatar-md"></div>
<div class="skeleton-avatar"></div>
<div class="skeleton-avatar skeleton-avatar-sm"></div>
<div class="skeleton-avatar skeleton-avatar-xs"></div>

Skeleton image

You can use a skeleton, which will look like a picture. You can easily change its height and width. Standard image ratio is 16:9.

<div class="skeleton-image"></div>
<div class="skeleton-image" style="width: 80px; height: 200px;"></div>
<div class="skeleton-image" style="width: 80px; height: 80px;"></div>

You can also use the ratio component, and get the image in the right proportions.

<div class="ratio ratio-1x1">
  <div class="skeleton-image"></div>
</div>
<div class="ratio ratio-4x3">
  <div class="skeleton-image"></div>
</div>
<div class="ratio ratio-16x9">
  <div class="skeleton-image"></div>
</div>
<div class="ratio ratio-21x9">
  <div class="skeleton-image"></div>
</div>

Live examples

See in the following examples how else you can use the skeleton component

<div class="card">
  <div class="ratio ratio-21x9 card-img-top">
    <div class="skeleton-image"></div>
  </div>
  <div class="card-body">
    <div class="skeleton-heading"></div>
    <div class="skeleton-line"></div>
    <div class="skeleton-line"></div>
  </div>
</div>
<div class="card">
  <div class="row g-0 align-items-center">
    <div class="col-3">
      <div class="ratio ratio-1x1 card-img-left">
        <div class="skeleton-image"></div>
      </div>
    </div>
    <div class="col">
      <div class="card-body">
        <div class="skeleton-heading"></div>
        <div class="skeleton-line"></div>
        <div class="skeleton-line"></div>
      </div>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-auto">
        <div class="skeleton-avatar"></div>
      </div>
      <div class="col">
        <div class="skeleton-line"></div>
        <div class="skeleton-line"></div>
      </div>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-body py-5 text-center">
    <div>
      <div class="skeleton-avatar skeleton-avatar-lg"></div>
    </div>
    <div class="mt w-75 mx-auto">
      <div class="skeleton-heading"></div>
      <div class="skeleton-line"></div>
    </div>
  </div>
</div>
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <div class="skeleton-avatar"></div>
        </div>
        <div class="col-7">
          <div class="skeleton-line"></div>
          <div class="skeleton-line"></div>
        </div>
        <div class="col-2 ms-auto text-end">
          <div class="skeleton-line"></div>
          <div class="skeleton-line"></div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <div class="skeleton-avatar"></div>
        </div>
        <div class="col-7">
          <div class="skeleton-line"></div>
          <div class="skeleton-line"></div>
        </div>
        <div class="col-2 ms-auto text-end">
          <div class="skeleton-line"></div>
          <div class="skeleton-line"></div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <div class="skeleton-avatar"></div>
        </div>
        <div class="col-7">
          <div class="skeleton-line"></div>
          <div class="skeleton-line"></div>
        </div>
        <div class="col-2 ms-auto text-end">
          <div class="skeleton-line"></div>
          <div class="skeleton-line"></div>
        </div>
      </div>
    </li>
    <li class="list-group-item">
      <div class="row align-items-center">
        <div class="col-auto">
          <div class="skeleton-avatar"></div>
        </div>
        <div class="col-7">
          <div class="skeleton-line"></div>
          <div class="skeleton-line"></div>
        </div>
        <div class="col-2 ms-auto text-end">
          <div class="skeleton-line"></div>
          <div class="skeleton-line"></div>
        </div>
      </div>
    </li>
  </ul>
</div>