Placeholder

Placeholder is used to reserve space for content that will soon appear in a layout.

Placeholder line

Placeholder lines can contain lines of text. Their length is different and depends on the col- class.

However, it may be useful to specify the full width in order to fit the content more effectively.

You can also move the lines to the right or center them:

Placeholder heading

A placeholder can also contain an element that looks like a header:

Placeholder avatar

You can use a placeholder that will look like an avatar. You can use the avatar component, and get the image in the right proportions.

<div class="avatar placeholder"></div>

Look at the example below to see how the avatar placeholder looks.

You can also use the avatar component with different sizes. Look at the example below to see how the avatar placeholder looks.

Placeholder image

You can use a placeholder that will look like a picture. You can use the ratio component, and get the image in the right proportions.

Placeholder color

By default, the placeholder uses currentColor. This can be overridden with a custom color or utility class. Full color classes are available for background colors.

<span class="placeholder col-12 bg-dark"></span>

Look at the example below to see how the color affects the placeholder.

Placeholder sizing

The sizes of placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm, or .placeholder-xs.

Animation

Animate placeholders with .placeholder-glow or .placeholder-wave to better convey the perception of something being actively loaded.

Live examples

See in the following examples how else you can use the placeholder component