Use loading placeholders for your components or pages to indicate something may still be loading.

🤖 Looking for the LLM-optimized version?View llm.md

Other frameworks

CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.

• Angular Placeholder
• React Placeholder
• Vue Placeholder

About

Bootstrap placeholders can enhance your application’s user experience. They’re built exclusively with HTML and CSS, so you don’t need any JavaScript to create them. However, you’ll require some custom JavaScript to toggle their visibility. Their appearance, color, and size can be easily customized using our utility classes.

Example

In the example below, we use the Bootstrap card component and modify it with placeholders to form a “loading card.” The size and proportions remain consistent between the two.

<divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Bootstrap card title</h5><pclass="card-text">Some brief example text to expand on the card title and form most of the card's content.</p><ahref="#"class="btn btn-primary">Go somewhere</a></div></div><divclass="card"aria-hidden="true"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title placeholder-glow"><spanclass="placeholder col-6"></span></h5><pclass="card-text placeholder-glow"><spanclass="placeholder col-7"></span><spanclass="placeholder col-4"></span><spanclass="placeholder col-4"></span><spanclass="placeholder col-6"></span><spanclass="placeholder col-8"></span></p><aclass="btn btn-primary disabled placeholder col-6"aria-disabled="true"></a></div></div>

How it works

Create placeholders using the.placeholder class along with a grid column class (e.g.,.col-6) to define thewidth. These placeholders can either replace text inside an element or be added as a modifier class to an existing component.

To ensure theheight is maintained, we style.btns with::before. This pattern can be expanded for other cases or a  can be added inside the element to match the height when actual text appears.

<paria-hidden="true"><spanclass="placeholder col-6"></span></p><aclass="btn btn-primary disabled placeholder col-4"aria-disabled="true"></a>

Width

You can adjust thewidth using grid column classes, width utilities, or inline styles.

<spanclass="placeholder col-6"></span><spanclass="placeholder w-75"></span><spanclass="placeholder"style="width: 25%;"></span>

Color

By default, theplaceholder usescurrentColor, but this can be replaced with a custom color or utility class.

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

Sizing

The size of.placeholders depends on the typographic style of the parent element. Customize them with size modifiers:.placeholder-lg,.placeholder-sm, or.placeholder-xs.

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

Animation

Animate Bootstrap placeholders using.placeholder-glow or.placeholder-wave to visually suggest that content isactively loading.

<pclass="placeholder-glow"><spanclass="placeholder col-12"></span></p><pclass="placeholder-wave"><spanclass="placeholder col-12"></span></p>

Customization

SASS variables

$placeholder-opacity-max:.5;$placeholder-opacity-min:.2;

CoreUI vs Bootstrap

While this Placeholder component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.

What sets CoreUI apart from Bootstrap?

• ✅Fully compatible with Bootstrap – Built directly on Bootstrap, all classes and behaviors work as expected.
• 🧠Framework-native versions – CoreUI provides dedicated libraries forReact.js,Vue.js, andAngular, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
• 👨‍💻Maintained by a full-time team – CoreUI is developed as a professional product, not a volunteer-driven project.
• 📦More built-in components – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
• 🛠️Sass Modules support today – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
• 🌍Better LTR/RTL support – Uses modern CSS logical properties for seamless bidirectional layout support.
• 🔒LTS (Long-Term Support) – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.

Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.

👉Explore CoreUI Bootstrap Components
👉Compare CoreUI vs Bootstrap