Placeholder ​

Basic Usage ​

At the placeholder core, you have the BPlaceholder component:

<BPlaceholder cols="7" />
<BPlaceholder width="65" />
<BPlaceholder cols="6" />

Width ​

You can adjust the width using props width and cols. Cols is a number value 1-12, whereas width is a percentage. Width takes priority over cols.

<BPlaceholder width="30" cols="12" />
<BPlaceholder width="75%" variant="danger" />
<BPlaceholder width="12" variant="warning" />
<BPlaceholder :cols="6" variant="info" />
<BPlaceholder cols="8" variant="info" />

Placeholder Animations ​

Bootstrap supports two types of animations, wave and glow.

• Note: when using BPlaceholderCard, the image does not inherit an animation

HTML

template

<BPlaceholderCard style="max-width: 20rem; " animation="glow" />
<BPlaceholderCard style="max-width: 20rem; " animation="wave" />
<BPlaceholder animation="glow" />

Sizing ​

You can adjust the sizing of a placeholder by using the size prop. Acceptable values are 'xs', 'sm', or 'lg'.

<BPlaceholder size="lg" />
<BPlaceholder size="sm" />
<BPlaceholder size="xs" />

Helper Components ​

BPlaceholder has several wrapper components to quickly create larger component sets, such as BPlaceholderCard, BPlaceholderTable, and BPlaceholderButton.

Placeholder Wrapper ​

The BPlaceholderWrapper is a renderless component that picks between a 'loading' component, and a 'finished' component. It is useful when you have to wait for loading to finish, before rendering the actual content. Depending on the use case, you may prefer to use Suspense instead.

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Restart

HTML

vue

<template>
  <BPlaceholderWrapper :loading="loading">
    <template #loading>
      <BPlaceholderCard style="max-width: 20rem;" no-footer />
    </template>
    <BCard
      title="Card Title"
      img-src="https://picsum.photos/600/300/?image=25"
      img-alt="Image"
      img-top
      tag="article"
      style="max-width: 20rem;"
      class="mb-2"
    >
      <BCardText>
        Some quick example text to build on the card title and make up the bulk of the card's
        content.
      </BCardText>
      <BButton href="#placeholder-wrapper" variant="primary">Go somewhere</BButton>
    </BCard>
  </BPlaceholderWrapper>
  <BButton @click="startLoading">Restart</BButton>
</template>

<script setup lang="ts">
const loading = ref(false)

watchEffect(() => {
  if (loading.value === true) {
    setTimeout(() => {
      loading.value = false
    }, 5000)
  }
})

const startLoading = () => {
  if (loading.value === true) return
  loading.value = true
}

onMounted(startLoading)
</script>

Placeholder Buttons ​

You can easily render a placeholder that has the button styling by using BPlaceholderButton.

<BPlaceholderButton cols="3" />

Placeholder Cards ​

Placeholders have built-in support for rendering a placeholder card with BPlaceholderCard.

HTML

template

<BPlaceholderCard style="max-width: 20rem" />

Placeholder Tables ​

You can also render a full placeholder table with BPlaceholderTable.

<BPlaceholderTable />

Advanced Helper Component Usage ​

Advanced Cards ​

Cards expose various props and slots to make them more personalized.

You can adjust the image using various props, such as imgBlankColor, and imgBottom, or you can optionally use imgSrc to place a real image, rather than a blank.

Each section of the BPlaceholderCard exposes its slot elements, so you can easily override the defaults. Available slots are: img, header, default, and footer.

The footer also exposes some props that you can use to adjust the behavior of a button. Most notably prop noButton. If set to true, it will convert it to a basic placeholder appearance. Alternatively, you can use the noFooter prop to remove it altogether.

Footer

HTML

template

<BPlaceholderCard img-src="https://picsum.photos/1024/480/?image=1" img-bottom no-header>
  <template #footer>
    Footer
  </template>

  <template #default>
    <BPlaceholder />
    <BPlaceholder width="65" variant="danger" />
    <BPlaceholder cols="6" variant="info" />
  </template>
</BPlaceholderCard>

Advanced Tables ​

BPlaceholderTable comes with various props to adjust the number of rows, columns, header/footer, and their stylings.

You can adjust the number of columns and rows using props columns and rows respectively. You can use showFooter to show the footer, or noHeader to hide the header. Both the footer and header have cellWidth, size, animation, and variant adjustments by prepending the type with the styling, eg: headerCellWidth, headerSize, footerAnimation, footerVariant.

Optionally, you can manually adjust any scope of the table using slots. The following slots are available: thead, default, and tfoot. Do note that the slots wrap the entire table scope, slot thead is the entire thead, and slot default is the entire tbody, so you will likely need to manually wrap your slot usages in these elements if you plan on using them.

<BPlaceholderTable
  columns="3"
  rows="2"
  show-footer
  footer-variant="info"
  header-size="lg"
  footer-size="xs"
  footer-columns="1"
  header-columns="4"
>
  <template #default>
    <tbody>
      <tr>
        <td>
          <BPlaceholder size="lg" variant="secondary" />
          <BPlaceholder size="sm" variant="secondary" />
          <BPlaceholder size="xs" variant="secondary" />
        </td>
        <td>
          <BPlaceholder variant="warning" />
          <BPlaceholder animation="wave" variant="warning" />
        </td>
        <td>
          <BPlaceholder animation="glow" variant="danger" />
        </td>
      </tr>
    </tbody>
  </template>
</BPlaceholderTable>