Bootstrap - Bootstrap Placeholder Component

The Bootstrap Placeholder Component is used to create temporary visual representations of content while the actual content is still loading. It is commonly used in websites and web applications where information is retrieved from a server, API, database, or other external source.

Instead of showing an empty area while waiting for the content, placeholders display shapes that indicate where text, images, cards, or other elements will eventually appear. This provides users with immediate visual feedback and makes the interface feel more responsive.

1. Why Bootstrap Placeholders Are Used

Suppose a website needs to retrieve a list of products from a server. The request may take a few seconds. If the page remains blank during this time, users may think that the website is not working.

A placeholder can display something similar to:

[......................]
[......................]
[..............]

Once the actual data is available, the placeholder can be replaced with the real content.

Bootstrap provides predefined classes that make it easy to create these loading placeholders without writing extensive custom CSS.

2. Basic Placeholder

The basic placeholder is created using the .placeholder class.

<p class="placeholder-glow">
  <span class="placeholder col-6"></span>
</p>

Here, the <span> element represents the temporary content.

The col-6 class controls its width. In Bootstrap's 12-column grid system, col-6 makes the placeholder approximately half the available width.

Other width classes can also be used:

<span class="placeholder col-4"></span>
<span class="placeholder col-8"></span>
<span class="placeholder col-12"></span>

This allows placeholders to have different widths depending on the expected content.

3. Placeholder Text

Placeholders are particularly useful for representing text before the actual text is available.

For example:

<p class="placeholder-glow">
  <span class="placeholder col-7"></span>
  <span class="placeholder col-4"></span>
  <span class="placeholder col-4"></span>
  <span class="placeholder col-6"></span>
</p>

The different widths create the appearance of multiple lines of text with varying lengths.

When the actual content loads, these placeholder elements can be removed and replaced with real paragraphs.

4. Placeholder Animation

Bootstrap provides two main animation styles for placeholders: glow and wave.

The glow effect is created using .placeholder-glow:

<p class="placeholder-glow">
  <span class="placeholder col-6"></span>
</p>

The placeholder gradually changes its opacity, producing a subtle glowing effect.

The wave effect can be created using .placeholder-wave:

<p class="placeholder-wave">
  <span class="placeholder col-6"></span>
</p>

The animation gives users a stronger indication that the content is currently loading.

5. Placeholder Sizes

Bootstrap provides classes for different placeholder sizes. These are useful when the placeholder needs to represent headings, normal text, or smaller text.

The available size classes include:

<span class="placeholder col-12"></span>
<span class="placeholder placeholder-lg col-12"></span>
<span class="placeholder col-12"></span>
<span class="placeholder placeholder-sm col-12"></span>
<span class="placeholder placeholder-xs col-12"></span>

The exact visual size depends on the surrounding element and Bootstrap version.

For example, a large placeholder can represent a heading, while a smaller placeholder can represent supporting text.

6. Placeholder Colors

Bootstrap placeholders can also use contextual background colors.

For example:

<span class="placeholder col-6 bg-primary"></span>
<span class="placeholder col-6 bg-secondary"></span>
<span class="placeholder col-6 bg-success"></span>

However, neutral placeholder colors are generally preferable for loading interfaces because they make it clear that the displayed shapes are temporary content rather than actual information.

7. Creating a Skeleton Card

One of the most common uses of placeholders is creating a skeleton version of a card.

For example:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>

    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
    </p>

    <a href="#" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

This creates a temporary card structure while the real card information is being loaded.

After the data is received, JavaScript can replace the placeholder elements with the actual title, description, and button content.

8. Placeholder Width

Bootstrap placeholders commonly use width utilities such as:

<span class="placeholder col-3"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-9"></span>
<span class="placeholder col-12"></span>

These correspond to Bootstrap's 12-column layout.

For example:

  • col-3 represents approximately 25% width.

  • col-6 represents approximately 50% width.

  • col-9 represents approximately 75% width.

  • col-12 represents 100% width.

This makes it possible to create realistic-looking skeleton layouts.

9. Placeholder with Buttons

Placeholders can also represent buttons while the application is loading.

<a href="#" class="btn btn-primary disabled placeholder col-4"></a>

The disabled class prevents the temporary button from appearing interactive.

Once the actual content is ready, the placeholder can be replaced with a functional button.

10. Placeholder and JavaScript

Bootstrap's placeholder component mainly provides the visual appearance. It does not automatically retrieve data or replace the placeholder with actual content.

JavaScript is commonly used for this purpose.

A typical process is:

Page starts loading
       ↓
Display placeholders
       ↓
Request data from server/API
       ↓
Receive response
       ↓
Remove placeholders
       ↓
Display actual content

For example, JavaScript might initially display:

<div id="loading">
  <p class="placeholder-glow">
    <span class="placeholder col-8"></span>
  </p>
</div>

After receiving the data, JavaScript can hide the loading section and display the real content.

11. Advantages of Bootstrap Placeholders

Bootstrap placeholders provide several benefits:

Improved user experience: Users can immediately see that content is being loaded.

Better visual continuity: The page structure remains visible while information is being retrieved.

Easy implementation: Developers can create loading layouts using Bootstrap classes rather than writing extensive CSS.

Responsive design: Placeholder widths can be controlled using Bootstrap's responsive utility classes.

Consistent appearance: Placeholders can follow the same design system used throughout the Bootstrap application.

12. Important Considerations

Placeholders should normally be displayed only while content is genuinely loading. They should not remain visible after the content has been successfully retrieved.

They should also resemble the approximate structure of the final content. For example, a long text area should have several placeholder lines rather than one small rectangle.

Accessibility should also be considered. Loading states should communicate appropriate information to assistive technologies when necessary, rather than relying only on visual animation.

Conclusion

The Bootstrap Placeholder Component provides a convenient way to create temporary loading interfaces. By combining the .placeholder class with width, size, animation, and utility classes, developers can create skeleton versions of text, cards, buttons, and other page elements. The component does not handle data loading itself; instead, it provides the visual loading state that can be controlled through application logic such as JavaScript.