Placeholders
Placeholders are skeleton blocks shown while real content loads, so the layout does not jump. Combine widths, sizes, colours and glow or wave animations to sketch cards, lists, tables, profiles, dashboards and media before the data arrives.
1Basic placeholders
<code>.placeholder</code> with grid column classes sets the width of each loading bar.
<p aria-hidden="true"><span class="placeholder col-6"></span></p>
<p aria-hidden="true"><span class="placeholder col-4"></span> <span class="placeholder col-7"></span></p>
<p class="mb-0" aria-hidden="true"><span class="placeholder w-3/4"></span></p>2Sizes
<code>.placeholder-lg</code>, <code>-sm</code> and <code>-xs</code> change the bar height.
<span class="placeholder col-12 placeholder-lg"></span><span class="placeholder col-12"></span><span class="placeholder col-12 placeholder-sm"></span><span class="placeholder col-12 placeholder-xs"></span>3Colors
Background utilities colour the placeholders; the default uses the current text colour.
<span class="placeholder col-12"></span><span class="placeholder col-12 bg-primary"></span><span class="placeholder col-12 bg-secondary"></span><span class="placeholder col-12 bg-success"></span><span class="placeholder col-12 bg-danger"></span><span class="placeholder col-12 bg-warning"></span><span class="placeholder col-12 bg-info"></span><span class="placeholder col-12 bg-dark"></span>4Glow animation
Wrap the placeholders in <code>.placeholder-glow</code> to make them pulse softly.
<p class="placeholder-glow mb-0" aria-hidden="true"><span class="placeholder col-12"></span><span class="placeholder col-9"></span><span class="placeholder col-10"></span></p>5Wave animation
<code>.placeholder-wave</code> moves a light wave across the bars.
<p class="placeholder-wave mb-0" aria-hidden="true"><span class="placeholder col-12"></span><span class="placeholder col-8"></span><span class="placeholder col-11"></span></p>6Loading card
A card skeleton: image block, title, text lines and a disabled button placeholder.
<div class="card" aria-hidden="true" style="max-width:20rem">
<div class="placeholder-glow">
<span class="placeholder col-12" style="height:150px"></span>
</div>
<div class="card-body">
<h3 class="card-title h5 placeholder-glow"><span class="placeholder col-6"></span></h3>
<p class="card-text placeholder-glow"><span class="placeholder col-7"></span> <span class="placeholder col-4"></span> <span class="placeholder col-4"></span> <span class="placeholder col-6"></span></p>
<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>7Loaded vs loading
The real card next to its placeholder version so you can match sizes exactly.
<div class="row g-3">
<div class="col-sm-6">
<div class="card h-full">
<img src="../assets/img/product-1.svg" class="card-img-top" alt="Shelter support">
<div class="card-body">
<h3 class="card-title h6">Shelter support</h3>
<p class="card-text small">The new local partners shows projects moving forward in just a few clicks.</p>
<a href="#" class="btn btn-primary btn-sm">View</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card h-full" aria-hidden="true">
<div class="ratio ratio-1x1 placeholder-wave">
<span class="placeholder w-full h-full"></span>
</div>
<div class="card-body">
<h3 class="card-title h6 placeholder-wave"><span class="placeholder col-8"></span></h3>
<p class="card-text placeholder-wave"><span class="placeholder col-12"></span><span class="placeholder col-9"></span></p>
<span class="btn btn-primary btn-sm disabled placeholder col-4"></span>
</div>
</div>
</div>
</div>8List with avatars
Round avatar placeholders and two lines per row for contact or message lists.
<ul class="list-group placeholder-glow" aria-hidden="true">
<li class="list-group-item flex items-center gap-4"><span class="placeholder rounded-full" style="width:40px;height:40px"></span><div class="grow"><span class="placeholder col-5"></span><span class="placeholder placeholder-sm col-9"></span></div></li>
<li class="list-group-item flex items-center gap-4"><span class="placeholder rounded-full" style="width:40px;height:40px"></span><div class="grow"><span class="placeholder col-6"></span><span class="placeholder placeholder-sm col-8"></span></div></li>
<li class="list-group-item flex items-center gap-4"><span class="placeholder rounded-full" style="width:40px;height:40px"></span><div class="grow"><span class="placeholder col-7"></span><span class="placeholder placeholder-sm col-7"></span></div></li>
<li class="list-group-item flex items-center gap-4"><span class="placeholder rounded-full" style="width:40px;height:40px"></span><div class="grow"><span class="placeholder col-8"></span><span class="placeholder placeholder-sm col-6"></span></div></li>
</ul>9Table rows
Keep the real table header and fill the rows with placeholders while data loads.
| Customer | Date | Amount |
|---|---|---|
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Customer</th>
<th scope="col">Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody class="placeholder-glow" aria-hidden="true">
<tr>
<td><span class="placeholder col-8"></span></td>
<td><span class="placeholder col-6"></span></td>
<td><span class="placeholder col-4"></span></td>
</tr>
<tr>
<td><span class="placeholder col-9"></span></td>
<td><span class="placeholder col-6"></span></td>
<td><span class="placeholder col-5"></span></td>
</tr>
<tr>
<td><span class="placeholder col-10"></span></td>
<td><span class="placeholder col-6"></span></td>
<td><span class="placeholder col-6"></span></td>
</tr>
<tr>
<td><span class="placeholder col-8"></span></td>
<td><span class="placeholder col-6"></span></td>
<td><span class="placeholder col-7"></span></td>
</tr>
</tbody>
</table>
</div>10Profile header
Cover, avatar and name placeholders for a profile page.
<div class="border rounded-md overflow-hidden placeholder-wave" aria-hidden="true">
<span class="placeholder col-12 bg-secondary" style="height:90px"></span>
<div class="px-4 pb-4" style="margin-top:-36px">
<span class="placeholder rounded-full border border-3 border-white bg-secondary" style="width:72px;height:72px"></span>
<div class="mt-2">
<span class="placeholder placeholder-lg col-5"></span><span class="placeholder col-3"></span>
</div>
</div>
</div>11Article
Headline, meta line and paragraphs of varying width for a blog post.
<div class="placeholder-glow" aria-hidden="true">
<span class="placeholder placeholder-lg col-10 mb-2"></span><span class="placeholder placeholder-sm col-3 mb-4"></span>
<p><span class="placeholder col-12"></span><span class="placeholder col-12"></span><span class="placeholder col-11"></span><span class="placeholder col-6"></span></p>
<p class="mb-0"><span class="placeholder col-12"></span><span class="placeholder col-10"></span><span class="placeholder col-8"></span></p>
</div>12Button placeholders
Disabled buttons with <code>.placeholder</code> keep their colour and size while loading.
<div class="flex flex-wrap gap-2" aria-hidden="true">
<a class="btn btn-primary disabled placeholder col-3" aria-disabled="true"></a><a class="btn btn-outline-secondary disabled placeholder col-2" aria-disabled="true"></a><a class="btn btn-success disabled placeholder col-4" aria-disabled="true"></a>
</div>13Form skeleton
Label lines and input-sized blocks while a form is fetched.
<div class="placeholder-glow" aria-hidden="true" style="max-width:420px">
<span class="placeholder placeholder-sm col-3 mb-1"></span><span class="placeholder col-12 mb-4" style="height:38px"></span><span class="placeholder placeholder-sm col-4 mb-1"></span><span class="placeholder col-12 mb-4" style="height:38px"></span><span class="placeholder placeholder-sm col-2 mb-1"></span><span class="placeholder col-12 mb-4" style="height:80px"></span><span class="placeholder bg-primary col-4" style="height:38px"></span>
</div>14Comment thread
Nested comment skeletons with indented replies.
<div class="placeholder-wave" aria-hidden="true">
<div class="flex gap-2 mb-4">
<span class="placeholder rounded-full shrink-0" style="width:32px;height:32px"></span>
<div class="grow bg-surface-3 rounded-md p-2">
<span class="placeholder placeholder-sm col-3"></span><span class="placeholder col-12"></span><span class="placeholder col-6"></span>
</div>
</div>
<div class="flex gap-2 mb-4 ms-12">
<span class="placeholder rounded-full shrink-0" style="width:32px;height:32px"></span>
<div class="grow bg-surface-3 rounded-md p-2">
<span class="placeholder placeholder-sm col-3"></span><span class="placeholder col-12"></span><span class="placeholder col-7"></span>
</div>
</div>
<div class="flex gap-2 mb-4">
<span class="placeholder rounded-full shrink-0" style="width:32px;height:32px"></span>
<div class="grow bg-surface-3 rounded-md p-2">
<span class="placeholder placeholder-sm col-3"></span><span class="placeholder col-12"></span><span class="placeholder col-8"></span>
</div>
</div>
</div>15Product grid
Square image placeholders with title and price lines in a responsive grid.
<div class="row g-3 placeholder-glow" aria-hidden="true">
<div class="col-6 col-md-3">
<div class="ratio ratio-1x1 mb-2">
<span class="placeholder rounded-md w-full h-full"></span>
</div>
<span class="placeholder col-10"></span><span class="placeholder placeholder-sm col-4 bg-primary"></span>
</div>
<div class="col-6 col-md-3">
<div class="ratio ratio-1x1 mb-2">
<span class="placeholder rounded-md w-full h-full"></span>
</div>
<span class="placeholder col-10"></span><span class="placeholder placeholder-sm col-4 bg-primary"></span>
</div>
<div class="col-6 col-md-3">
<div class="ratio ratio-1x1 mb-2">
<span class="placeholder rounded-md w-full h-full"></span>
</div>
<span class="placeholder col-10"></span><span class="placeholder placeholder-sm col-4 bg-primary"></span>
</div>
<div class="col-6 col-md-3">
<div class="ratio ratio-1x1 mb-2">
<span class="placeholder rounded-md w-full h-full"></span>
</div>
<span class="placeholder col-10"></span><span class="placeholder placeholder-sm col-4 bg-primary"></span>
</div>
</div>16Stat tiles
Dashboard KPI cards waiting for their numbers.
<div class="row g-3 placeholder-glow" aria-hidden="true">
<div class="col-6 col-lg-3">
<div class="card">
<div class="card-body">
<span class="placeholder placeholder-sm col-6"></span><span class="placeholder placeholder-lg col-8 bg-primary"></span>
</div>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="card">
<div class="card-body">
<span class="placeholder placeholder-sm col-6"></span><span class="placeholder placeholder-lg col-8 bg-success"></span>
</div>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="card">
<div class="card-body">
<span class="placeholder placeholder-sm col-6"></span><span class="placeholder placeholder-lg col-8 bg-warning"></span>
</div>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="card">
<div class="card-body">
<span class="placeholder placeholder-sm col-6"></span><span class="placeholder placeholder-lg col-8 bg-info"></span>
</div>
</div>
</div>
</div>17Chat bubbles
Alternating left and right message bubbles.
<div class="flex flex-col gap-2 placeholder-wave" aria-hidden="true" style="max-width:420px">
<span class="placeholder rounded-full col-7" style="height:2rem"></span><span class="placeholder rounded-full col-5 self-end bg-primary" style="height:2rem"></span><span class="placeholder rounded-full col-8" style="height:2rem"></span><span class="placeholder rounded-full col-4 self-end bg-primary" style="height:2rem"></span>
</div>18Navbar skeleton
A header outline while the menu loads - brand, links and an avatar circle.
<div class="flex items-center gap-4 border rounded-md p-4 placeholder-glow" aria-hidden="true">
<span class="placeholder col-2 placeholder-lg"></span><span class="placeholder col-1 hidden sm:inline-block"></span><span class="placeholder col-1 hidden sm:inline-block"></span><span class="placeholder col-1 hidden sm:inline-block"></span><span class="placeholder rounded-full ms-auto" style="width:36px;height:36px"></span>
</div>19Media block
A 16:9 placeholder for a video or hero image with a caption below.
<div aria-hidden="true" style="max-width:520px">
<div class="ratio ratio-16x9 placeholder-wave mb-2">
<span class="placeholder rounded-md w-full h-full bg-secondary"></span>
</div>
<p class="placeholder-wave mb-0"><span class="placeholder col-9"></span><span class="placeholder col-5 placeholder-sm"></span></p>
</div>20Chart skeleton
Bars of different heights hint at a chart that is still loading.
<div class="card" aria-hidden="true">
<div class="card-body placeholder-glow">
<span class="placeholder col-4 mb-4"></span>
<div class="flex items-end gap-2" style="height:140px">
<span class="placeholder flex-auto rounded-t-md bg-primary" style="height:45%"></span><span class="placeholder flex-auto rounded-t-md bg-primary" style="height:70%"></span><span class="placeholder flex-auto rounded-t-md bg-primary" style="height:55%"></span><span class="placeholder flex-auto rounded-t-md bg-primary" style="height:90%"></span><span class="placeholder flex-auto rounded-t-md bg-primary" style="height:35%"></span><span class="placeholder flex-auto rounded-t-md bg-primary" style="height:80%"></span><span class="placeholder flex-auto rounded-t-md bg-primary" style="height:60%"></span><span class="placeholder flex-auto rounded-t-md bg-primary" style="height:75%"></span>
</div>
</div>
</div>