React Bootstrap Placeholder Component
Placeholder with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use the React Bootstrap Placeholder component from CoreUI to create animated loading placeholders that simulate content before it loads.
About React Bootstrap Placeholder#
The React Bootstrap Placeholder component lets you create skeleton loading effects using only HTML and CSS. It's useful for improving perceived performance while content is loading.
React placeholders are fully customizable using utility classes and support animations, sizing, colors, and layout variations.
React Bootstrap Placeholder example#
Here we simulate a "loading card" layout using placeholder elements. The dimensions match the final content layout for a seamless transition.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereHow React Bootstrap Placeholder works#
Use the <CPlaceholder> component and specify width using grid props like xs={6} or utility classes. You can place it inside existing elements or use it standalone.
The use of aria-hidden="true" hides the placeholder from screen readers. You may need JavaScript to toggle content and notify assistive technologies of updates.
Width#
Set the width of placeholders with utility classes, inline styles, or grid props.
Color#
By default, placeholders use currentColor, but you can apply any color using Bootstrap utility classes.
Sizing#
Use the size prop (lg, sm, or xs) to adjust the height and line spacing of placeholders to match the parent typography.
Animation#
Make React Bootstrap Placeholder elements feel dynamic by using animation="glow" or animation="wave".
API reference#
Review the available props for the React Bootstrap Placeholder component: