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.

On this page

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.

import React from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardImage,
  CCardText,
  CCardTitle,
  CPlaceholder,
} from '@coreui/react'

export const PlaceholderExample = () => {
  return (
    <>
      <CCard style={{ width: '18rem' }}>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            Some quick example text to build on the card title and make up the bulk of the card's
            content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
      <CCard style={{ width: '18rem' }}>
        <CCardImage
          as="svg"
          orientation="top"
          width="100%"
          height="162"
          xmlns="http://www.w3.org/2000/svg"
          role="img"
          aria-label="Placeholder"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
        >
          <title>Placeholder</title>
          <rect width="100%" height="100%" fill="#868e96"></rect>
        </CCardImage>
        <CCardBody>
          <CPlaceholder as={CCardTitle} animation="glow" xs={7}>
            <CPlaceholder xs={6} />
          </CPlaceholder>
          <CPlaceholder as={CCardText} animation="glow">
            <CPlaceholder xs={7} />
            <CPlaceholder xs={4} />
            <CPlaceholder xs={4} />
            <CPlaceholder xs={6} />
            <CPlaceholder xs={8} />
          </CPlaceholder>
          <CPlaceholder as={CButton} color="primary" disabled href="#" tabIndex={-1} xs={6} />
        </CCardBody>
      </CCard>
    </>
  )
}

import React from 'react'
import {
  CButton,
  CCard,
  CCardBody,
  CCardImage,
  CCardText,
  CCardTitle,
  CPlaceholder,
} from '@coreui/react'

export const PlaceholderExample = () => {
  return (
    <>
      <CCard style={{ width: '18rem' }}>
        <CCardImage orientation="top" src={'/assets/img/react.jpg'} />
        <CCardBody>
          <CCardTitle>Card title</CCardTitle>
          <CCardText>
            Some quick example text to build on the card title and make up the bulk of the card's
            content.
          </CCardText>
          <CButton color="primary" href="#">
            Go somewhere
          </CButton>
        </CCardBody>
      </CCard>
      <CCard style={{ width: '18rem' }}>
        <CCardImage
          as="svg"
          orientation="top"
          width="100%"
          height="162"
          xmlns="http://www.w3.org/2000/svg"
          role="img"
          aria-label="Placeholder"
          preserveAspectRatio="xMidYMid slice"
          focusable="false"
        >
          <title>Placeholder</title>
          <rect width="100%" height="100%" fill="#868e96"></rect>
        </CCardImage>
        <CCardBody>
          <CPlaceholder as={CCardTitle} animation="glow" xs={7}>
            <CPlaceholder xs={6} />
          </CPlaceholder>
          <CPlaceholder as={CCardText} animation="glow">
            <CPlaceholder xs={7} />
            <CPlaceholder xs={4} />
            <CPlaceholder xs={4} />
            <CPlaceholder xs={6} />
            <CPlaceholder xs={8} />
          </CPlaceholder>
          <CPlaceholder as={CButton} color="primary" disabled href="#" tabIndex={-1} xs={6} />
        </CCardBody>
      </CCard>
    </>
  )
}

How 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.

import React from 'react'
import { CButton, CPlaceholder } from '@coreui/react'

export const Placeholder2Example = () => {
  return (
    <>
      <p aria-hidden="true">
        <CPlaceholder xs={6} />
      </p>
      <CPlaceholder
        as={CButton}
        color="primary"
        aria-hidden="true"
        disabled
        href="#"
        tabIndex={-1}
        xs={4}
      />
    </>
  )
}

import React from 'react'
import { CButton, CPlaceholder } from '@coreui/react'

export const Placeholder2Example = () => {
  return (
    <>
      <p aria-hidden="true">
        <CPlaceholder xs={6} />
      </p>
      <CPlaceholder
        as={CButton}
        color="primary"
        aria-hidden="true"
        disabled
        href="#"
        tabIndex={-1}
        xs={4}
      />
    </>
  )
}

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.

import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderWidthExample = () => {
  return (
    <>
      <CPlaceholder xs={6} />
      <CPlaceholder className="w-75" />
      <CPlaceholder style={{ width: '30%' }} />
    </>
  )
}

import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderWidthExample = () => {
  return (
    <>
      <CPlaceholder xs={6} />
      <CPlaceholder className="w-75" />
      <CPlaceholder style={{ width: '30%' }} />
    </>
  )
}

Color

By default, placeholders use currentColor, but you can apply any color using Bootstrap utility classes.

import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderColorExample = () => {
  return (
    <>
      <CPlaceholder xs={12} />

      <CPlaceholder color="primary" xs={12} />
      <CPlaceholder color="secondary" xs={12} />
      <CPlaceholder color="success" xs={12} />
      <CPlaceholder color="danger" xs={12} />
      <CPlaceholder color="warning" xs={12} />
      <CPlaceholder color="info" xs={12} />
      <CPlaceholder color="light" xs={12} />
      <CPlaceholder color="dark" xs={12} />
    </>
  )
}

import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderColorExample = () => {
  return (
    <>
      <CPlaceholder xs={12} />

      <CPlaceholder color="primary" xs={12} />
      <CPlaceholder color="secondary" xs={12} />
      <CPlaceholder color="success" xs={12} />
      <CPlaceholder color="danger" xs={12} />
      <CPlaceholder color="warning" xs={12} />
      <CPlaceholder color="info" xs={12} />
      <CPlaceholder color="light" xs={12} />
      <CPlaceholder color="dark" xs={12} />
    </>
  )
}

Sizing

Use the size prop (lg, sm, or xs) to adjust the height and line spacing of placeholders to match the parent typography.

import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderSizingExample = () => {
  return (
    <>
      <CPlaceholder xs={12} size="lg" />
      <CPlaceholder xs={12} />
      <CPlaceholder xs={12} size="sm" />
      <CPlaceholder xs={12} size="xs" />
    </>
  )
}

import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderSizingExample = () => {
  return (
    <>
      <CPlaceholder xs={12} size="lg" />
      <CPlaceholder xs={12} />
      <CPlaceholder xs={12} size="sm" />
      <CPlaceholder xs={12} size="xs" />
    </>
  )
}

Animation

Make React Bootstrap Placeholder elements feel dynamic by using animation="glow" or animation="wave".

import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderAnimationExample = () => {
  return (
    <>
      <CPlaceholder as="p" animation="glow">
        <CPlaceholder xs={12} />
      </CPlaceholder>
      <CPlaceholder as="p" animation="wave">
        <CPlaceholder xs={12} />
      </CPlaceholder>
    </>
  )
}

import React from 'react'
import { CPlaceholder } from '@coreui/react'

export const PlaceholderAnimationExample = () => {
  return (
    <>
      <CPlaceholder as="p" animation="glow">
        <CPlaceholder xs={12} />
      </CPlaceholder>
      <CPlaceholder as="p" animation="wave">
        <CPlaceholder xs={12} />
      </CPlaceholder>
    </>
  )
}

API reference

Review the available props for the React Bootstrap Placeholder component:

<CPlaceholder />