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-75"></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-100">
<img src="../assets/img/product-7.svg" class="card-img-top" alt="Corner office">
<div class="card-body">
<h3 class="card-title h6">Corner office</h3>
<p class="card-text small">Mortgage advisors help you understand what you can afford before you start.</p>
<a href="#" class="btn btn-primary btn-sm">View</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card h-100" aria-hidden="true">
<div class="ratio ratio-1x1 placeholder-wave">
<span class="placeholder w-100 h-100"></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 d-flex align-items-center gap-3"><span class="placeholder rounded-circle" style="width:40px;height:40px"></span><div class="flex-grow-1"><span class="placeholder col-5"></span><span class="placeholder placeholder-sm col-9"></span></div></li>
<li class="list-group-item d-flex align-items-center gap-3"><span class="placeholder rounded-circle" style="width:40px;height:40px"></span><div class="flex-grow-1"><span class="placeholder col-6"></span><span class="placeholder placeholder-sm col-8"></span></div></li>
<li class="list-group-item d-flex align-items-center gap-3"><span class="placeholder rounded-circle" style="width:40px;height:40px"></span><div class="flex-grow-1"><span class="placeholder col-7"></span><span class="placeholder placeholder-sm col-7"></span></div></li>
<li class="list-group-item d-flex align-items-center gap-3"><span class="placeholder rounded-circle" style="width:40px;height:40px"></span><div class="flex-grow-1"><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 overflow-hidden placeholder-wave" aria-hidden="true">
<span class="placeholder col-12 bg-secondary" style="height:90px"></span>
<div class="px-3 pb-3" style="margin-top:-36px">
<span class="placeholder rounded-circle 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-3"></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="d-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-3" style="height:38px"></span><span class="placeholder placeholder-sm col-4 mb-1"></span><span class="placeholder col-12 mb-3" style="height:38px"></span><span class="placeholder placeholder-sm col-2 mb-1"></span><span class="placeholder col-12 mb-3" 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="d-flex gap-2 mb-3">
<span class="placeholder rounded-circle flex-shrink-0" style="width:32px;height:32px"></span>
<div class="flex-grow-1 bg-body-tertiary rounded 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="d-flex gap-2 mb-3 ms-5">
<span class="placeholder rounded-circle flex-shrink-0" style="width:32px;height:32px"></span>
<div class="flex-grow-1 bg-body-tertiary rounded 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="d-flex gap-2 mb-3">
<span class="placeholder rounded-circle flex-shrink-0" style="width:32px;height:32px"></span>
<div class="flex-grow-1 bg-body-tertiary rounded 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 w-100 h-100"></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 w-100 h-100"></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 w-100 h-100"></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 w-100 h-100"></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="d-flex flex-column gap-2 placeholder-wave" aria-hidden="true" style="max-width:420px">
<span class="placeholder rounded-pill col-7" style="height:2rem"></span><span class="placeholder rounded-pill col-5 align-self-end bg-primary" style="height:2rem"></span><span class="placeholder rounded-pill col-8" style="height:2rem"></span><span class="placeholder rounded-pill col-4 align-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="d-flex align-items-center gap-3 border rounded p-3 placeholder-glow" aria-hidden="true">
<span class="placeholder col-2 placeholder-lg"></span><span class="placeholder col-1 d-none d-sm-inline-block"></span><span class="placeholder col-1 d-none d-sm-inline-block"></span><span class="placeholder col-1 d-none d-sm-inline-block"></span><span class="placeholder rounded-circle 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 w-100 h-100 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-3"></span>
<div class="d-flex align-items-end gap-2" style="height:140px">
<span class="placeholder flex-fill rounded-top bg-primary" style="height:45%"></span><span class="placeholder flex-fill rounded-top bg-primary" style="height:70%"></span><span class="placeholder flex-fill rounded-top bg-primary" style="height:55%"></span><span class="placeholder flex-fill rounded-top bg-primary" style="height:90%"></span><span class="placeholder flex-fill rounded-top bg-primary" style="height:35%"></span><span class="placeholder flex-fill rounded-top bg-primary" style="height:80%"></span><span class="placeholder flex-fill rounded-top bg-primary" style="height:60%"></span><span class="placeholder flex-fill rounded-top bg-primary" style="height:75%"></span>
</div>
</div>
</div>