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. This step matters because Glow placeholder example is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
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. This step matters because Placeholder block is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
Placeholder button
Section titled “Placeholder button”Buttons can also be represented as placeholders to keep layouts stable. This step matters because Placeholder button is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
Wave placeholder example
Section titled “Wave placeholder example”Wave placeholders are more visually noticeable than glow, so use them sparingly. This step matters because Wave placeholder example is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
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.