Bootstrap Placeholders

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

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.

Screenshot: Glow placeholder exampleClick to open the larger image

Glow: Key parts

Glow placeholders typically have an outer wrapper that applies the effect, plus inner blocks that represent lines and shapes.

Screenshot: Glow: Key partsClick to open the larger image

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.

Screenshot: Placeholder blockClick to open the larger image

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.

Screenshot: Placeholder buttonClick to open the larger image

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.

Screenshot: Wave placeholder exampleClick to open the larger image

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

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.

Placeholders = skeleton UI

Use placeholders for async loading, previews, and preventing layout shift while content arrives.

Spinners = compact waits

Use spinners for small actions or short single waits where a full skeleton would be overkill.

Next steps

Continue with a related tour or go back to the Bootstrap tours index.