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
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.
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.
You can also “opt out” of an
img having a skeleton using the
Using the .skeleton class
Animation will be applied to any empty element with the
.skeleton could be used to imitate a desktop leaderboard ad.