Cards

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.

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.

<b-card> 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 v4 sizing classes.

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

<div>
  <b-card
    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"
  >
    <b-card-text>
      Some quick example text to build on the card title and make up the bulk of the card's content.
    </b-card-text>

    <b-button href="#" variant="primary">Go somewhere</b-button>
  </b-card>
</div>

<!-- b-card.vue -->

Content types

Cards support a wide variety of content, including images, text, list groups, links and more. The following are examples of what's supported inside a <b-card>

Card body

The building block of a <b-card> is the <b-card-body> section which provides a padded section within a card.

By default the <b-card> content is automatically placed in a <b-card-body> section:

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

<!-- b-card-body.vue -->

Disable the automatic <b-card-body> section (and associated padding) by setting the prop no-body on the <b-card>.

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

<!-- b-card-body-no-body.vue -->

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

Use the <b-card-body> sub-component to place your own card body anywhere in a <b-card> 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 sub-title prop. The title is rendered using the sub-component <b-card-title> while the Sub Title is rendered using the sub-component <b-card-sub-title>.

With sub-component <b-card-text>, paragraph text can be added to the card. The last <b-card-text> in the card body will have its bottom margin automatically removed (via CSS). Text within <b-card-text> 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 <b-link> component).

<div>
  <b-card title="Card title" sub-title="Card subtitle">
    <b-card-text>
      Some quick example text to build on the <em>card title</em> and make up the bulk of the card's
      content.
    </b-card-text>

    <b-card-text>A second paragraph of text in the card.</b-card-text>

    <a href="#" class="card-link">Card link</a>
    <b-link href="#" class="card-link">Another link</b-link>
  </b-card>
</div>

<!-- b-card-text.vue -->

Images

The <b-card> 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 <b-card> using the sub-component <b-card-img>. See the kitchen sink example below for usage.

<div>
  <div>
    <h4>Top and Bottom</h4>
    <b-card-group deck>
      <b-card img-src="https://placekitten.com/1000/300" img-alt="Card image" img-top>
        <b-card-text>
          Some quick example text to build on the card and make up the bulk of the card's content.
        </b-card-text>
      </b-card>

      <b-card img-src="https://placekitten.com/1000/300" img-alt="Card image" img-bottom>
        <b-card-text>
          Some quick example text to build on the card and make up the bulk of the card's content.
        </b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-4">
    <h4>Left and Right (or Start and End)</h4>
    <b-card img-src="https://placekitten.com/300/300" img-alt="Card image" img-left class="mb-3">
      <b-card-text>
        Some quick example text to build on the card and make up the bulk of the card's content.
      </b-card-text>
    </b-card>

    <b-card img-src="https://placekitten.com/300/300" img-alt="Card image" img-right>
      <b-card-text>
        Some quick example text to build on the card and make up the bulk of the card's content.
      </b-card-text>
    </b-card>
  </div>
</div>

<!-- b-card-img.vue -->

Note: For left and right images, you may need to apply additional styles to classes .card-img-left and .card-img-right, 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:

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

<!-- b-card-overlay-img-.vue -->

Lazy loaded images

Use the <b-card-img-lazy> sub-component to lazy load images as they scroll into view. <b-card-img-lazy> supports the same props as <b-card-img> as well as many of the props of the <b-img-lazy> component.

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)

<div>
  <b-card-group deck>
    <b-card
      header="featured"
      header-tag="header"
      footer="Card Footer"
      footer-tag="footer"
      title="Title"
    >
      <b-card-text>Header and footers using props.</b-card-text>
      <b-button href="#" variant="primary">Go somewhere</b-button>
    </b-card>

    <b-card title="Title" header-tag="header" footer-tag="footer">
      <template v-slot:header>
        <h6 class="mb-0">Header Slot</h6>
      </template>
      <b-card-text>Header and footers using slots.</b-card-text>
      <b-button href="#" variant="primary">Go somewhere</b-button>
      <template v-slot:footer>
        <em>Footer Slot</em>
      </template>
    </b-card>
  </b-card-group>
</div>

<!-- b-card-header-footer.vue -->

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.

<div>
  <b-card
    no-body
    style="max-width: 20rem;"
    img-src="https://placekitten.com/380/200"
    img-alt="Image"
    img-top
  >
    <template v-slot:header>
      <h4 class="mb-0">Hello World</h4>
    </template>

    <b-card-body>
      <b-card-title>Card Title</b-card-title>
      <b-card-sub-title class="mb-2">Card Sub Title</b-card-sub-title>
      <b-card-text>
        Some quick example text to build on the card title and make up the bulk of the card's
        content.
      </b-card-text>
    </b-card-body>

    <b-list-group flush>
      <b-list-group-item>Cras justo odio</b-list-group-item>
      <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
      <b-list-group-item>Vestibulum at eros</b-list-group-item>
    </b-list-group>

    <b-card-body>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </b-card-body>

    <b-card-footer>This is a footer</b-card-footer>

    <b-card-img src="https://placekitten.com/480/210" alt="Image" bottom></b-card-img>
  </b-card>
</div>

<!-- b-card-kitchen-sink.vue -->

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 no-gutters prop on <b-row> and use md props on <b-col> to make the card horizontal at the md breakpoint. Class rounded-0 removes the rounding of the <b-card-img> corners while class overflow-hidden on <b-card> 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.

<div>
  <b-card no-body class="overflow-hidden" style="max-width: 540px;">
    <b-row no-gutters>
      <b-col md="6">
        <b-card-img src="https://picsum.photos/400/400/?image=20" alt="Image" class="rounded-0"></b-card-img>
      </b-col>
      <b-col md="6">
        <b-card-body title="Horizontal Card">
          <b-card-text>
            This is a wider card with supporting text as a natural lead-in to additional content.
            This content is a little bit longer.
          </b-card-text>
        </b-card-body>
      </b-col>
    </b-row>
  </b-card>
</div>

<!-- b-card-horizontal.vue -->

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.

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

<!-- b-card-text-variants.vue -->

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 my require setting the prop text-variant to adjust the text color.

Solid

<div>
  <div>
    <b-card-group deck>
      <b-card bg-variant="primary" text-variant="white" header="Primary" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="secondary" text-variant="white" header="Secondary" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="success" text-variant="white" header="Success" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-3">
    <b-card-group deck>
      <b-card bg-variant="info" text-variant="white" header="Info" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="warning" text-variant="white" header="Warning" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="danger" text-variant="white" header="Danger" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-3">
    <b-card-group deck>
      <b-card bg-variant="light" header="Light" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="dark" header="Dark" text-variant="white" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card header="Default" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
</div>

<!-- b-card-variants.vue -->

Bordered

<div>
  <div>
    <b-card-group deck>
      <b-card
        border-variant="primary"
        header="Primary"
        header-bg-variant="primary"
        header-text-variant="white"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="secondary"
        header="Secondary"
        header-border-variant="secondary"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card border-variant="success" header="Success" align="center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-3">
    <b-card-group deck>
      <b-card border-variant="info" header="Info" align="center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="warning"
        header="Warning"
        header-bg-variant="transparent"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="danger"
        header="Danger"
        header-border-variant="danger"
        header-text-variant="danger"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-3">
    <b-card-group deck class="mb-3">
      <b-card border-variant="light" header="Light" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card border-variant="dark" header="Dark" align="center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
</div>

<!-- b-card-border-variants.vue -->

Variant to class mapping

BootstrapVue <b-card> variants are directly mapped to Bootstrap v4 card classes by pre-pending bg- (for solid) or border- (for bordered) to the above variant names.

Header and footer variants

You can also apply the solid and border variants individually to card headers and footers via the header-bg-variant, header-border-variant, header-text-variant, footer-bg-variant, footer-border-variant, and footer-text-variant props.

<div>
  <b-card
    header="Card Header"
    header-text-variant="white"
    header-tag="header"
    header-bg-variant="dark"
    footer="Card Footer"
    footer-tag="footer"
    footer-bg-variant="success"
    footer-border-variant="dark"
    title="Title"
    style="max-width: 20rem;"
  >
    <b-card-text>Header and footers variants.</b-card-text>
  </b-card>
</div>

<!-- b-card-header-footer-variant.vue -->

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Nav integration

Integrate <b-nav> into card headers easily.

Using the header slot:

<div>
  <b-card title="Card Title" body-class="text-center" header-tag="nav">
    <template v-slot:header>
      <b-nav card-header tabs>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </template>

    <b-card-text>
      With supporting text below as a natural lead-in to additional content.
    </b-card-text>

    <b-button variant="primary">Go somewhere</b-button>
  </b-card>
</div>

<!-- card-with-nav-header-slot.vue -->

Using <b-card-header> sub-component:

<div>
  <b-card no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header tabs>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-title>Card Title</b-card-title>

      <b-card-text>
        With supporting text below as a natural lead-in to additional content.
      </b-card-text>

      <b-button variant="primary">Go somewhere</b-button>
    </b-card-body>
  </b-card>
</div>

<!-- card-with-nav-header-component.vue -->

For more information on using <b-nav> in card headers, refer to the Navs documentation.

Card groups

In addition to styling the content within cards, BootstrapVue includes a <b-card-group> component for laying out series of cards. For the time being, these layout options are not yet responsive.

Default card group

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

When using card groups with footers, their content will automatically line up.

<div>
  <b-card-group>
    <b-card title="Title" img-src="https://placekitten.com/g/300/450" img-alt="Image" img-top>
      <b-card-text>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This content is a little bit longer.
      </b-card-text>
      <template v-slot:footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>

    <b-card title="Title" img-src="https://placekitten.com/g/300/450" img-alt="Image" img-top>
      <b-card-text>
        This card has supporting text below as a natural lead-in to additional content.
      </b-card-text>
      <template v-slot:footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>

    <b-card title="Title" img-src="https://placekitten.com/g/300/450" img-alt="Image" img-top>
      <b-card-text>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This card has even longer content than the first to show that equal height action.
      </b-card-text>
      <template v-slot:footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>
  </b-card-group>
</div>

<!-- b-card-group.vue -->

Card deck groups

Need a set of equal width and height cards that aren't attached to one another? Use card decks by setting the deck prop. And just like with regular card groups, card footers in decks will automatically line up.

<div>
  <b-card-group deck>
    <b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Image" img-top>
      <b-card-text>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This content is a little bit longer.
      </b-card-text>
      <template v-slot:footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>

    <b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Image" img-top>
      <b-card-text>
        This card has supporting text below as a natural lead-in to additional content.
      </b-card-text>
      <template v-slot:footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>

    <b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Image" img-top>
      <b-card-text>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This card has even longer content than the first to show that equal height action.
      </b-card-text>
      <template v-slot:footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>
  </b-card-group>
</div>

<!-- b-card-group-deck.vue -->

Card column groups

Cards can be organized into Masonry-like columns with by wrapping them in a <b-card-group> with the prop columns set. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn't a bulletproof solution yet.

<div>
  <b-card-group columns>
    <b-card
      title="Card title that wraps to a new line"
      img-src="https://placekitten.com/g/400/450"
      img-alt="Image"
      img-top
    >
      <b-card-text>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This content is a little bit longer.
      </b-card-text>
    </b-card>

    <b-card header="Quote">
      <blockquote class="blockquote mb-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer class="blockquote-footer">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </footer>
      </blockquote>
    </b-card>

    <b-card title="Title" img-src="https://placekitten.com/500/350" img-alt="Image" img-top>
      <b-card-text>
        This card has supporting text below as a natural lead-in to additional content.
      </b-card-text>
      <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
    </b-card>

    <b-card bg-variant="primary" text-variant="white">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>
          <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
        </footer>
      </blockquote>
    </b-card>

    <b-card>
      <b-card-title>Title</b-card-title>
      <b-card-text>
        This card has supporting text below as a natural lead-in to additional content.
      </b-card-text>
      <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
    </b-card>

    <b-card img-src="https://picsum.photos/400/400/?image=41" img-alt="Image" overlay></b-card>

    <b-card img-src="https://picsum.photos/400/200/?image=41" img-alt="Image" img-top>
      <b-card-text>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This card has even longer content than the first.
      </b-card-text>
      <template v-slot:footer>
        <small class="text-muted">Footer Text</small>
      </template>
    </b-card>
  </b-card-group>
</div>

<!-- b-card-group-columns.vue -->

Component reference

`<b-card>`

Functional component

View source

<b-card> Properties
<b-card> Slots

Properties

Property (Click to sort Ascending)	Type	Default	Description
`body-tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag for the body
`body-bg-variant`	`String`		Applies one of the Bootstrap theme color variants to the body background
`body-border-variant`	`String`		Applies one of the Bootstrap theme color variants to the body border
`body-text-variant`	`String`		Applies one of the Bootstrap theme color variants to the body text
`body-class`	`String` or `Object` or `Array`		CSS class (or classes) to apply to the body
`title`	`String`		Text content to place in the title
`title-tag`	`String`	`'h4'`	Specify the HTML tag to render instead of the default tag for the title
`sub-title`	`String`		Text content to place in the sub title
`sub-title-tag`	`String`	`'h6'`	Specify the HTML tag to render instead of the default tag for the sub title
`sub-title-text-variant`	`String`	`'muted'`	Applies one of the Bootstrap theme color variants to the sub title text
`overlay`	`Boolean`	`false`	When set, will overlay the card body on top of the image (if the card has an image)
`header-tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag for the header
`header-bg-variant`	`String`		Applies one of the Bootstrap theme color variants to the header background
`header-border-variant`	`String`		Applies one of the Bootstrap theme color variants to the header border
`header-text-variant`	`String`		Applies one of the Bootstrap theme color variants to the header text
`header`	`String`		Text content to place in the header
`header-html` Use with caution	`String`		HTML string content to place in the header. Use with caution
`header-class`	`String` or `Object` or `Array`		CSS class (or classes) to apply to the header
`footer-tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag for the footer
`footer-bg-variant`	`String`		Applies one of the Bootstrap theme color variants to the footer background
`footer-border-variant`	`String`		Applies one of the Bootstrap theme color variants to the footer border
`footer-text-variant`	`String`		Applies one of the Bootstrap theme color variants to the footer text
`footer`	`String`		Text content to place in the footer
`footer-html` Use with caution	`String`		HTML string content to place in the footer. Use with caution
`footer-class`	`String` or `Object` or `Array`		CSS class (or classes) to apply to the footer
`img-src`	`String`		URL for the optional image
`img-alt`	`String`		Value to set the image attribute 'alt'
`img-top`	`Boolean`	`false`	Set if the image should appear at the top of the card
`img-bottom`	`Boolean`	`false`	Set if the image should appear at the bottom of the card
`img-start`	`Boolean`	`false`	Set if the image should appear at the start (left) of the card
`img-left`	`Boolean`	`false`	Set if the image should appear at the start (left) of the card. Synonym for the 'left' prop
`img-end`	`Boolean`	`false`	Set if the image should appear at the end (right) of the card
`img-right`	`Boolean`	`false`	Set if the image should appear at the end (right) of the card. Synonym for the 'right' prop
`img-height`	`Number` or `String`		The value to set on the image's 'height' attribute
`img-width`	`Number` or `String`		The value to set on the image's 'width' attribute
`tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag
`bg-variant`	`String`		Applies one of the Bootstrap theme color variants to the background
`border-variant`	`String`		Applies one of the Bootstrap theme color variants to the border
`text-variant`	`String`		Applies one of the Bootstrap theme color variants to the text
`align`	`String`		Text alignment for the card's content: 'left', 'center' or 'right'
`no-body`	`Boolean`	`false`	Disable rendering of the default inner card-body element

Caution: Props that support HTML strings (*-html) can be vulnerable to Cross Site Scripting (XSS) attacks when passed raw user supplied values. You must properly sanitize the user input first!

Slots

Slot Name	Description
`header`	For custom rendering of header content
`footer`	For custom rendering of footer content

`<b-card-header>`

Functional component

View source

<b-card-header> Properties

Properties

Property	Type	Default	Description
`header-tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag for the header
`header-bg-variant`	`String`		Applies one of the Bootstrap theme color variants to the header background
`header-border-variant`	`String`		Applies one of the Bootstrap theme color variants to the header border
`header-text-variant`	`String`		Applies one of the Bootstrap theme color variants to the header text
`header`	`String`		Text content to place in the header
`header-html` Use with caution	`String`		HTML string content to place in the header. Use with caution
`header-class`	`String` or `Object` or `Array`		CSS class (or classes) to apply to the header

Caution: Props that support HTML strings (*-html) can be vulnerable to Cross Site Scripting (XSS) attacks when passed raw user supplied values. You must properly sanitize the user input first!

`<b-card-footer>`

Functional component

View source

<b-card-footer> Properties

Properties

Property	Type	Default	Description
`footer-tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag for the footer
`footer-bg-variant`	`String`		Applies one of the Bootstrap theme color variants to the footer background
`footer-border-variant`	`String`		Applies one of the Bootstrap theme color variants to the footer border
`footer-text-variant`	`String`		Applies one of the Bootstrap theme color variants to the footer text
`footer`	`String`		Text content to place in the footer
`footer-html` Use with caution	`String`		HTML string content to place in the footer. Use with caution
`footer-class`	`String` or `Object` or `Array`		CSS class (or classes) to apply to the footer

Caution: Props that support HTML strings (*-html) can be vulnerable to Cross Site Scripting (XSS) attacks when passed raw user supplied values. You must properly sanitize the user input first!

`<b-card-body>`

Functional component

View source

<b-card-body> Properties

Properties

Property (Click to sort Ascending)	Type	Default	Description
`body-tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag for the body
`body-bg-variant`	`String`		Applies one of the Bootstrap theme color variants to the body background
`body-border-variant`	`String`		Applies one of the Bootstrap theme color variants to the body border
`body-text-variant`	`String`		Applies one of the Bootstrap theme color variants to the body text
`body-class`	`String` or `Object` or `Array`		CSS class (or classes) to apply to the body
`title`	`String`		Text content to place in the title
`title-tag`	`String`	`'h4'`	Specify the HTML tag to render instead of the default tag for the title
`sub-title`	`String`		Text content to place in the sub title
`sub-title-tag`	`String`	`'h6'`	Specify the HTML tag to render instead of the default tag for the sub title
`sub-title-text-variant`	`String`	`'muted'`	Applies one of the Bootstrap theme color variants to the sub title text
`overlay`	`Boolean`	`false`	When set, will overlay the card body on top of the image (if the card has an image)

`<b-card-title>`

Functional component

View source

<b-card-title> Properties

Properties

Property	Type	Default	Description
`title`	`String`		Text content to place in the title
`title-tag`	`String`	`'h4'`	Specify the HTML tag to render instead of the default tag for the title

`<b-card-sub-title>`

Functional component

View source

<b-card-sub-title> Properties

Properties

Property	Type	Default	Description
`sub-title`	`String`		Text content to place in the sub title
`sub-title-tag`	`String`	`'h6'`	Specify the HTML tag to render instead of the default tag for the sub title
`sub-title-text-variant`	`String`	`'muted'`	Applies one of the Bootstrap theme color variants to the sub title text

`<b-card-img>`

Functional component

View source

<b-card-img> Properties

Properties

Property (Click to sort Ascending)	Type	Default	Description
`src` Required	`String`		URL to set for the 'src' attribute
`alt`	`String`		Value to set for the 'alt' attribute
`top`	`Boolean`	`false`	Set if the image will be placed at the top of the card
`bottom`	`Boolean`	`false`	Set if the image will be placed at the bottom of the card
`start`	`Boolean`	`false`	Set if the image will be placed at the start (left) of the card
`left`	`Boolean`	`false`	Set if the image will be placed at the start (left) of the card. Synonym for the 'left' prop
`end`	`Boolean`	`false`	Set if the image will be placed at the end (right) of the card
`right`	`Boolean`	`false`	Set if the image will be placed at the end (right) of the card. Synonym for the 'right' prop
`height`	`Number` or `String`		The value to set on the image's 'height' attribute
`width`	`Number` or `String`		The value to set on the image's 'width' attribute

`<b-card-img-lazy>`

Functional component

View source

<b-card-img-lazy> Properties

Properties

Property (Click to sort Ascending)	Type	Default	Description
`src` Required	`String`		URL to set for the 'src' attribute
`srcset`	`String` or `Array`
`sizes`	`String` or `Array`
`alt`	`String`		Value to set for the 'alt' attribute
`width`	`Number` or `String`		The value to set on the image's 'width' attribute
`height`	`Number` or `String`		The value to set on the image's 'height' attribute
`blank-src`	`String`	`null`	URL of placeholder image. If not set, an SVG placeholder placeholder will be used
`blank-color`	`String`	`'transparent'`	CSS color of the blank SVG placeholder image. Has no effect if 'blank-src' is set
`blank-width`	`Number` or `String`		Value of the 'width' attribute for the placeholder image
`blank-height`	`Number` or `String`		Value of the 'height' attribute for the placeholder image
`show`	`Boolean`	`false`	If set to true, will force show the image specified via the 'src' prop
`offset`	`Number` or `String`	`360`	Number of pixels away from the viewport edge before the lazy image is loaded
`top`	`Boolean`	`false`	Set if the image will be placed at the top of the card
`bottom`	`Boolean`	`false`	Set if the image will be placed at the bottom of the card
`start`	`Boolean`	`false`	Set if the image will be placed at the start (left) of the card
`left`	`Boolean`	`false`	Set if the image will be placed at the start (left) of the card. Synonym for the 'left' prop
`end`	`Boolean`	`false`	Set if the image will be placed at the end (right) of the card
`right`	`Boolean`	`false`	Set if the image will be placed at the end (right) of the card. Synonym for the 'right' prop

`<b-card-text>`

Functional component

View source

<b-card-text> Properties

Properties

Property	Type	Default	Description
`text-tag`	`String`	`'p'`	Specify the HTML tag to render instead of the default tag for the text content

`<b-card-group>`

Functional component

View source

<b-card-group> Properties

Properties

Property	Type	Default	Description
`tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag
`deck`	`Boolean`	`false`	When set renders the card group with gutters between cards
`columns`	`Boolean`	`false`	When set, renders the card group in a masonry-like columnar style

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export	Import Path
`<b-card>`	`BCard`	`bootstrap-vue`
`<b-card-header>`	`BCardHeader`	`bootstrap-vue`
`<b-card-footer>`	`BCardFooter`	`bootstrap-vue`
`<b-card-body>`	`BCardBody`	`bootstrap-vue`
`<b-card-title>`	`BCardTitle`	`bootstrap-vue`
`<b-card-sub-title>`	`BCardSubTitle`	`bootstrap-vue`
`<b-card-img>`	`BCardImg`	`bootstrap-vue`
`<b-card-img-lazy>`	`BCardImgLazy`	`bootstrap-vue`
`<b-card-text>`	`BCardText`	`bootstrap-vue`
`<b-card-group>`	`BCardGroup`	`bootstrap-vue`

Example:

import { BCard } from 'bootstrap-vue'
Vue.component('b-card', BCard)

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`CardPlugin`	`bootstrap-vue`

Example:

import { CardPlugin } from 'bootstrap-vue'
Vue.use(CardPlugin)