How to create placeholder loading bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create Placeholder Loading with Bootstrap

Use Bootstrap's placeholder classes like placeholder-glow or placeholder-wave on elements to create loading placeholders. Apply placeholder with sizing classes such as col-6 to simulate text or content loading.

📐

Syntax

Bootstrap placeholders use the placeholder class combined with optional animation classes like placeholder-glow or placeholder-wave. You add sizing classes such as col-6 to control the width of the placeholder block.

placeholder: Base class for placeholder styling.
placeholder-glow: Adds a glowing animation effect.
placeholder-wave: Adds a wave animation effect.
col-*: Controls the width of the placeholder block.

html

<!-- Basic placeholder syntax -->
<span class="placeholder col-6"></span>

<!-- Placeholder with glow animation -->
<span class="placeholder placeholder-glow col-6"></span>

<!-- Placeholder with wave animation -->
<span class="placeholder placeholder-wave col-6"></span>

💻

Example

This example shows a simple card with a placeholder loading effect using placeholder-glow. The placeholders simulate text lines while content loads.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Placeholder Loading Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div class="container mt-5" style="max-width: 400px;">
    <div class="card p-3">
      <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>
        <span class="placeholder col-8"></span>
      </p>
      <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
    </div>
  </div>
</body>
</html>

Output

A card with grey animated placeholder bars simulating loading text lines and a disabled button placeholder.

⚠️

Common Pitfalls

Common mistakes when using Bootstrap placeholders include:

Not including the placeholder base class, so styles don't apply.
Forgetting to add sizing classes like col-*, resulting in zero width placeholders.
Using placeholders on elements that don't support inline content, causing layout issues.
Not adding animation classes if animation is desired.

html

<!-- Wrong: Missing placeholder class -->
<span class="col-6"></span>

<!-- Right: Includes placeholder class -->
<span class="placeholder col-6"></span>

📊

Quick Reference

Class	Purpose
placeholder	Base placeholder style
placeholder-glow	Glowing animation effect
placeholder-wave	Wave animation effect
col-*	Width control for placeholder (e.g., col-6 for 50%)
disabled	Disable interactive elements during loading

✅

Key Takeaways

Always use the base placeholder class with sizing classes to create visible placeholders.

Add placeholder-glow or placeholder-wave for smooth loading animations.

Use placeholders on inline or block elements that support content sizing for best results.

Remember to disable interactive elements during loading to improve user experience.

Bootstrap placeholders help simulate content loading states with minimal code.