Placeholder

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

Placeholder line

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

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

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

Placeholder heading

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

Placeholder avatar

You can use a placeholder, which 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 like.

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

Placeholder image

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

You can also 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 size 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