Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Placeholders in Bootstrap 5
Placeholders: Loading indicators that can be used to show something is still loading.
Basic Placeholders
Simple Placeholder
<!-- Basic placeholder --> <div class="placeholder-glow"> <span class="placeholder col-12"></span> </div>
Placeholder Widths
Width Variations
<!-- Width variations --> <span class="placeholder col-12"></span> <span class="placeholder col-6"></span> <span class="placeholder col-3"></span> <span class="placeholder col-1"></span> <!-- Custom width --> <span class="placeholder" style="width: 75%;"></span>
Placeholder Colors
<!-- Color variations --> <span class="placeholder bg-primary"></span> <span class="placeholder bg-secondary"></span> <span class="placeholder bg-success"></span> <span class="placeholder bg-danger"></span> <span class="placeholder bg-warning"></span> <span class="placeholder bg-info"></span>
Placeholder Sizes
Large
placeholder-lgDefault
placeholder (default)Small
placeholder-smAnimation Effects
Animated Placeholders
Glow Animation
placeholder-glowWave Animation
placeholder-wavePractical Examples
Real-World Usage
<!-- Card placeholder -->
<div class="card" aria-hidden="true">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
</p>
<a class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>
<!-- Profile placeholder -->
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="placeholder" style="width: 50px; height: 50px; border-radius: 50%;"></div>
</div>
<div class="flex-grow-1 ms-3">
<h5 class="placeholder-glow mb-2">
<span class="placeholder col-4"></span>
</h5>
<p class="placeholder-glow mb-0">
<span class="placeholder col-10"></span>
</p>
</div>
</div>Combining with Other Components
Button Placeholder
<button class="btn btn-primary disabled placeholder col-4"></button>
Input Placeholder
<div class="form-control disabled placeholder col-12"></div>
Accessibility Considerations
Accessibility Best Practices
- Use
aria-hidden="true"on placeholder containers - Add
aria-labelto indicate loading state - Use
aria-busy="true"for dynamic content - Ensure proper color contrast
- Test with screen readers
- Remove placeholders when content loads
JavaScript Integration
Dynamic Placeholders
// JavaScript example for dynamic placeholders
// Show placeholders
function showPlaceholders() {
document.getElementById('content').innerHTML = `
<div class="placeholder-glow">
<span class="placeholder col-12 mb-2"></span>
<span class="placeholder col-10 mb-2"></span>
<span class="placeholder col-8 mb-2"></span>
</div>
`;
}
// Hide placeholders and show content
function hidePlaceholders() {
document.getElementById('content').innerHTML = `
<h3>Actual Content</h3>
<p>This is the loaded content.</p>
`;
}
// Example usage with fetch
async function loadData() {
showPlaceholders();
try {
const response = await fetch('/api/data');
const data = await response.json();
hidePlaceholders();
displayData(data);
} catch (error) {
hidePlaceholders();
showError();
}
}Best Practices
Do's
- ✅ Use for async content loading
- ✅ Match placeholder to content shape
- ✅ Use animations for better UX
- ✅ Add accessibility attributes
- ✅ Remove when content loads
- ✅ Use appropriate colors
Don'ts
- ❌ Don't overuse placeholders
- ❌ Avoid long loading times
- ❌ Don't forget to remove them
- ❌ Avoid confusing shapes
- ❌ Don't use for static content
- ❌ Avoid flashing content
Customization Examples
Custom Animation
Rounded Placeholder
/* Custom CSS for placeholders */
/* Custom shimmer animation */
.custom-placeholder {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: custom-shimmer 1.5s infinite;
}
@keyframes custom-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Rounded placeholder */
.rounded-placeholder {
border-radius: 20px;
}