Bootstrap 5.2+ ships with placeholder utilities for skeleton loading screens. No JavaScript needed — just CSS classes for shimmer and wave animations.
Quick Setup
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.placeholder | Gray loading block |
.placeholder-glow | Pulsing shimmer on wrapper |
.placeholder-wave | Wave sweep animation |
.col-6 on placeholder | Controls width |
.rounded-pill | Pill-shaped placeholder |
.rounded-circle | Circle placeholder (avatar) |
1. Bootstrap 5 Card Skeleton
Loading skeleton for a card — uses Bootstrap 5's built-in placeholder and placeholder-glow utilities.
2. Bootstrap 5 Profile Skeleton
Skeleton loader for a user profile card with avatar, name and stats.
3. Bootstrap 5 Table Skeleton
Skeleton loader for a data table — animating rows while content loads.
4. Bootstrap 5 Dashboard Skeleton
Full dashboard skeleton — stat cards and content area loading state.
Frequently Asked Questions
Bootstrap 5.2+ has built-in placeholder utilities. Add class placeholder to any element for a gray block. Wrap in placeholder-glow for a shimmer animation or placeholder-wave for a wave animation. Control width with col-* classes.
placeholder-glow adds a pulsing opacity animation — the block fades in and out. placeholder-wave adds a sweeping wave animation that moves across the placeholder. Apply either class to the parent wrapper, not the individual placeholder elements.
Keep both skeleton and real content in the DOM. Show skeleton with d-block, hide with d-none. When data loads, swap the classes via JavaScript: skeleton.classList.add('d-none'); content.classList.remove('d-none'). Or use a JavaScript framework's conditional rendering.
Yes. Override the CSS variable: .placeholder { background-color: #fd4766; } or use inline style. The shimmer animation will still work. For a brand-colored skeleton: .placeholder { background-color: rgba(253,71,102,0.15); }.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.