Placeholders = skeleton UI
Use placeholders for async loading, previews, and preventing layout shift while content arrives.
Bootstrap Placeholders
Use Bootstrap placeholders to show loading states and keep page layout stable while data loads.
Introduction
Section titled “Introduction”In this tour you’ll learn when and how to use Bootstrap placeholders (skeleton UI) to improve perceived performance and reduce layout shift.
Glow placeholder example
Section titled “Glow placeholder example”Placeholders mimic the structure of content while data loads, keeping layout stable.
tip: Glow is a subtle shimmer that works well for text-heavy content.
Glow: Key parts
Section titled “Glow: Key parts”Glow placeholders typically have an outer wrapper that applies the effect, plus inner blocks that represent lines and shapes.
Placeholder block
Section titled “Placeholder block”Inner placeholder blocks represent the actual lines/shapes in the skeleton.
Placeholder button
Section titled “Placeholder button”Buttons can also be represented as placeholders to keep layouts stable.
Wave placeholder example
Section titled “Wave placeholder example”Wave placeholders are more visually noticeable than glow, so use them sparingly.
tip: Pick one placeholder style (glow or wave) and use it consistently across the app.
Wrap-up
Section titled “Wrap-up”Placeholders are a UX tool: they keep layout stable and communicate loading without jarring shifts. Match placeholder size to the final content.
When to use
Section titled “When to use”Use placeholders when:
- content loads asynchronously
- you want to prevent layout shift
- you’re showing a preview/skeleton of the final UI
Use spinners for small, compact waits or single actions.
Spinners = compact waits
Use spinners for small actions or short single waits where a full skeleton would be overkill.
Next steps
Section titled “Next steps”Continue with a related tour or go back to the Bootstrap tours index.