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>