bootstrap
  1. bootstrap-placeholders
PreviousNext

Bootstrap Placeholders

  • Bootstrap provides several placeholder classes that can be used to display dummy content while developing websites.
  • These classes are useful for when you need to visualize how your content will look but don't have actual content to use.

Syntax

Here are some examples of Bootstrap's placeholder classes:

  • .placeholder: this class creates a gray box with a dotted border and the word "Placeholder" inside.
  • .placeholder-*: this class creates a gray box with a dotted border and a specific aspect ratio. For example, .placeholder-4by3 creates a box with a 4:3 aspect ratio.

Example

Here's an example of how to use the .placeholder class

<div>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="placeholder">Placeholder</div>
</div>
Try Playground

Example

In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”.

<div class="row">
    <div class="col">
        <div class="card">
            <img src="https://static.additionalsheet.com/images//others/lucy.jpg" class="card-img-top w-25"
                alt="...">

            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                    card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card" aria-hidden="true">
            <img src="https://static.additionalsheet.com/images//others/lucy.jpg"
                class="card-img-top w-25 placeholder" alt="...">
            <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>
                    <span class="placeholder col-8"></span>
                </p>
                <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
            </div>
        </div>
    </div>
</div>
Try Playground

Color

By default, the placeholder uses currentColor. This can be overridden with a custom color or utility class.

<span class="placeholder col-12"></span>
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>
Try Playground

Sizing

The size of .placeholders are based on the typographic style of the parent element. 

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

Explanation

In the code above, we used the following classes to create the placeholders:

  • .row: this class creates a grid row to organize the content.
  • .col-md-*: this class creates a column of a specific width. We used col-md-6 to create two columns that take up half the width each.
  • .placeholder and .placeholder-*: these classes create gray boxes with dotted borders and either the word "Placeholder" or a specific aspect ratio inside.

Use

Placeholder classes can be used to visualize how content will look while developing a website. They can be especially useful when you don't have actual content to use.

Important Points

  • Bootstrap provides several placeholder classes that can be used to display dummy content while developing websites.
  • The .placeholder class creates a gray box with a dotted border and the word "Placeholder" inside.
  • The .placeholder-* class creates a gray box with a dotted border and a specific aspect ratio.

Summary

Bootstrap's placeholder classes are useful for when you need to visualize how your content will look but don't have actual content to use. They can be easily implemented and customized to fit your needs.

PaginationProgress
Published on: