Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Edit this page on GitHub

Overview

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other components.

BCard has no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized via styles or standard Bootstrap 5 sizing classes.

Change the default div root tag to any other HTML element by specifying via the tag prop.

Card Title

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

Go somewhere

HTML

template

<BCard
  title="Card Title"
  img-src="https://picsum.photos/id/25/600/300"
  img-alt="Image"
  img-top
  tag="article"
  style="max-width: 20rem"
>
  <BCardText>
    Some quick example text to build on the card title and make up the bulk of the card's content.
  </BCardText>
  <BButton
    href="#card-overview"
    variant="primary"
    >Go somewhere</BButton
  >
</BCard>

Content types

Cards support a wide variety of content, including images, text, list groups, links and more. The following are examples of what is supported inside a BCard.

Card body

The building block of a BCard is the BCardBody section which provides a padded section within a card.

By default, the BCard content is automatically placed in a BCardBody section:

This is some content within the default <BCardBody> block of the <BCard> component. Notice the padding between the card's border and this gray <div>.

HTML

template

<BCard class="text-center">
  <div class="bg-secondary text-light">
    This is some content within the default <samp>&lt;BCardBody&gt;</samp> block of the
    <samp>&lt;BCard&gt;</samp> component. Notice the padding between the card's border and this
    gray <samp>&lt;div&gt;</samp>.
  </div>
</BCard>

Disable the automatic BCardBody section (and associated padding) by setting the prop no-body on the BCard.

This is some content without the default <BCardBody> section. Notice the lack of padding between the card's border and this gray <div>.

HTML

template

<BCard
  no-body
  class="text-center"
>
  <div class="bg-secondary text-light">
    This is some content without the default <samp>&lt;BCardBody&gt;</samp> section. Notice the
    lack of padding between the card's border and this gray <samp>&lt;div&gt;</samp>.
  </div>
</BCard>

Note that with no-body enabled, the content of the title and subtitle props will not be rendered.

Use the BCardBody sub-component to place your own card body anywhere in a BCard component that has no-body set.

Titles, text, and links

Card titles are adding via the title prop, and sub titles are added via the subtitle prop. The title is rendered using the sub-component BCardTitle while the Sub Title is rendered using the sub-component BCardSubtitle.

With sub-component BCardText, paragraph text can be added to the card. The last BCardText in the card body will have its bottom margin automatically removed (via CSS). Text within BCardText can also be styled with the standard HTML tags.

Links can be added and placed next to each other by adding the .card-link class to a <a> tag (or BLink component).

Card Title

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

Go somewhere

HTML

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"
>
  <BCardText>
    Some quick example text to build on the card title and make up the bulk of the card's content.
  </BCardText>
  <BButton
    href="#card-parts"
    variant="primary"
    >Go somewhere</BButton
  >
</BCard>

Images

The BCard prop img-src places an image on the top of the card, and use the img-alt prop to specify a string to be placed in the image's alt attribute. The image specified by the img-src prop will be responsive and will adjust its width when the width of the card is changed.

Alternatively you can manually place images inside BCard using the sub-component BCardImg. See the kitchen sink example below for usage.

Top and Bottom

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

Left and Right (or Start and End)

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

HTML

template

<div>
  <h4>Top and Bottom</h4>
  <BCardGroup deck>
    <BCard
      img-src="https://picsum.photos/1000/300"
      img-alt="Card image"
      img-top
    >
      <BCardText>
        Some quick example text to build on the card and make up the bulk of the card's content.
      </BCardText>
    </BCard>
    <BCard
      img-src="https://picsum.photos/1000/300"
      img-alt="Card image"
      img-bottom
    >
      <BCardText>
        Some quick example text to build on the card and make up the bulk of the card's content.
      </BCardText>
    </BCard>
  </BCardGroup>
</div>
<div class="mt-4">
  <h4>Left and Right (or Start and End)</h4>
  <BCard
    img-src="https://picsum.photos/300/300"
    img-alt="Card image"
    img-left
    class="mb-3"
  >
    <BCardText>
      Some quick example text to build on the card and make up the bulk of the card's content.
    </BCardText>
  </BCard>
  <BCard
    img-src="https://picsum.photos/300/300"
    img-alt="Card image"
    img-right
  >
    <BCardText>
      Some quick example text to build on the card and make up the bulk of the card's content.
    </BCardText>
  </BCard>
</div>

Note: For left and right images, you may need to apply additional styles to classes .card-img-start and .card-img-end, as images will "stretch" in height if you have content that is taller than your image. Note headers and footers are not supported when images are left or right aligned. You may find the Horizontal Card Layout example to be more flexible when creating a responsive horizontal card.

Overlay image

Place the image in the background of the card by setting the boolean prop overlay:

Image Overlay

Subtitle

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

HTML

template

<BCard
  overlay
  img-src="https://picsum.photos/900/250/?image=3"
  img-alt="Card Image"
  text-variant="white"
  title="Image Overlay"
  subtitle="Subtitle"
>
  <BCardText>
    Some quick example text to build on the card and make up the bulk of the card's content.
  </BCardText>
</BCard>

Lazy loaded images

BCardImgLazy has been removed in favor of using a standalone prop on BImg. Use prop lazy on BImg and it will automatically use the browsers built in lazy-loading features that are supported natively on all major browsers.

Header and footer

Add an optional header and/or footer within a card via the header/footer props or named slots. You can control the wrapper element tags used by setting the header-tag and footer-tag props (both default is div).

featured

Title

Header and footers using props.

Go somewhere

Header Slot

Title

Header and footers using slots.

Go somewhere

HTML

template

<BCardGroup deck>
  <BCard
    header="featured"
    header-tag="header"
    footer="Card Footer"
    footer-tag="footer"
    title="Title"
  >
    <BCardText>Header and footers using props.</BCardText>
    <BButton
      href="#card-header-footer"
      variant="primary"
      >Go somewhere</BButton
    >
  </BCard>
  <BCard
    title="Title"
    header-tag="header"
    footer-tag="footer"
  >
    <template #header>
      <h6 class="mb-0">Header Slot</h6>
    </template>
    <BCardText>Header and footers using slots.</BCardText>
    <BButton
      href="#card-header-footer"
      variant="primary"
      >Go somewhere</BButton
    >
    <template #footer>
      <em>Footer Slot</em>
    </template>
  </BCard>
</BCardGroup>

Kitchen sink example

Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

Hello World

Card Title

Card Sub Title

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

Cras justo odio

Dapibus ac facilisis in

Vestibulum at eros

Card link Another link

This is a footer

HTML

template

<BCard
  no-body
  style="max-width: 20rem"
  img-src="https://picsum.photos/380/200"
  img-alt="Image"
  img-top
>
  <template #header>
    <h4 class="mb-0">Hello World</h4>
  </template>
  <BCardBody>
    <BCardTitle>Card Title</BCardTitle>
    <BCardSubtitle class="mb-2">Card Sub Title</BCardSubtitle>
    <BCardText>
      Some quick example text to build on the card title and make up the bulk of the card's
      content.
    </BCardText>
  </BCardBody>
  <BListGroup flush>
    <BListGroupItem>Cras justo odio</BListGroupItem>
    <BListGroupItem>Dapibus ac facilisis in</BListGroupItem>
    <BListGroupItem>Vestibulum at eros</BListGroupItem>
  </BListGroup>
  <BCardBody>
    <a
      href="#card-kitchen-sink"
      class="card-link"
      >Card link</a
    >
    <a
      href="#card-kitchen-sink"
      class="card-link"
      >Another link</a
    >
  </BCardBody>
  <BCardFooter>This is a footer</BCardFooter>
  <BCardImg
    src="https://picsum.photos/480/210"
    alt="Image"
    bottom
  />
</BCard>

Horizontal card layout

Using a combination of grid components, utility classes and individual card sub-components, cards can be made horizontal in a mobile-friendly and responsive way.

In the example below, we remove the row grid gutters with the class="g-0" prop on BRow and use md props on BCol to make the card horizontal at the md breakpoint. Class rounded-0 removes the rounding of the BCardImg corners while class overflow-hidden on BCard will appropriately clip the image's corners based on the border-radius of the card. Further adjustments may be needed depending on your card content.

Horizontal Card

This is a wider card with supporting text as a natural lead-in to additional content. This content is a little bit longer.

HTML

template

<BCard
  no-body
  class="overflow-hidden"
  style="max-width: 540px"
>
  <BRow class="g-0">
    <BCol md="6">
      <BCardImg
        src="https://picsum.photos/400/400/?image=20"
        alt="Image"
        class="rounded-0"
      />
    </BCol>
    <BCol md="6">
      <BCardBody title="Horizontal Card">
        <BCardText>
          This is a wider card with supporting text as a natural lead-in to additional content.
          This content is a little bit longer.
        </BCardText>
      </BCardBody>
    </BCol>
  </BRow>
</BCard>

Text variants

By default, cards use dark text and assume a light background. You can reverse that by toggling the color of text within, as well as that of the card's sub-components, via the prop text-variant. Then, specify a dark background variant.

Card Title

With supporting text below as a natural lead-in to additional content.

Go somewhere

HTML

template

<BCard
  bg-variant="dark"
  text-variant="white"
  title="Card Title"
>
  <BCardText> With supporting text below as a natural lead-in to additional content. </BCardText>
  <BButton
    href="#card-text-variants"
    variant="primary"
    >Go somewhere</BButton
  >
</BCard>

Background and border variants

Cards include their own variant style for quickly changing the background-color and of a card via the bg-variant and border-variant props. Darker solid variants may require setting the prop text-variant to adjust the text color.