Skeletons
Empty Elements
When an element has the .skeleton
class applied, it will by default have a skeleton animation attached during its :empty
state. This component does not exist in Bootstrap by default.
Please refer to these docs for more info on the :empty
pseudo-class.
Skeletons are applied to all <img>
elements by default, because these register as “empty” since images have no children.
In addition, there are also skeleton elements with predetermined heights and widths for h1’s (using .h1-skeleton
) and descriptions (using .p-skeleton
). We can add more as needed.
You could make a skeleton for any element using the .skeleton
class (to get the animation) and then manually declaring the height and width.
Examples
H1 Skeleton
<h1 class="h1-skeleton"></h1>
Description Skeleton
<div class="col-12 col-lg-8">
<p class="p-skeleton"></p>
</div>
Default skeleton for images
All images get skeletons by default, because these register as “empty” since images have no children. When building out certain skeleton images, you can give them a set height/width, or just allow them to fill the parent.
<img style="width:150px; height:150px;"/>
You can also “opt out” of an img
having a skeleton using the .no-skeleton
class.
<img class="no-skeleton" style="width:150px; height:150px;"/>
Using the .skeleton class
Animation will be applied to any empty element with the .skeleton
class.
<div class="skeleton my-1" style="width:100%; height:30px;"></div>
<div class="skeleton my-1" style="width:100%; height:30px;"></div>
For example, .skeleton
could be used to imitate a desktop leaderboard ad.
<div class="w-100 bg-800 justify-content-center align-items-center d-none d-lg-flex">
<div class="leaderboard-center skeleton my-3" style="height: 90px; width: 728px;"></div>
</div>