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>