## Documentation

# 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-right">
      <div class="skeleton-line"></div>
      <div class="skeleton-line"></div>
      <div class="skeleton-line"></div>
    </div>
    <div class="text-center mt">
      <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 ml-auto text-right">
              <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 ml-auto text-right">
              <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 ml-auto text-right">
              <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 ml-auto text-right">
              <div class="skeleton-line"></div>
              <div class="skeleton-line"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>