Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

About

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. If you’re familiar with Bootstrap 3, cards replace Bootstrap 4.0’s panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Example

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 Bootstrap components. They have no @margin by default, so use spacing utilities as needed.

Below is an example of a basic card with mixed content and a default width. Card widths are easily customized with Bootstrap’s various sizing options.

Card Title

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

Go Somewhere

<grid-row>
  <grid-col>
    <card>
      <title>Card Title</title>
      <image href="..." />
      <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
      <button href="#">Go Somewhere</button>
    </card>
  </grid-col>
</grid-row>

<bodydiv outputclass="row">
  <bodydiv outputclass="col">
    <section outputclass="card w-50">
      <title outputclass="h5">Card Title</title>
      <image outputclass="card-img-top" href="..." />
      <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
      <xref outputclass="btn-primary" href="#">Go Somewhere</xref>
    </section>
  </bodydiv>
</bodydiv>

Titles, text, and links

Links are added and placed next to each other by altering the @outputclass and adding card-link to an <xref> tag.

Subtitles are used by adding a <div> element.

Card Title

Card Subtitle

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

Card Link Another Link

<grid-row>
  <grid-col>
    <card>
      <title>Card Title</title>
      <div outputclass="h6">Card Subtitle</div>
      <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
      <xref outputclass="card-link" href="#">Card Link</xref>
      <xref outputclass="card-link" href="#">Another Link</xref>
    </card>
  </grid-col>
</grid-row>

<bodydiv outputclass="row">
  <bodydiv outputclass="col">
    <section outputclass="card w-50">
      <title outputclass="h5">Card Title</title>
      <div outputclass="h6">Card Subtitle</div>
      <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
      <xref outputclass="card-link" href="#">Card Link</xref>
      <xref outputclass="card-link" href="#">Another Link</xref>
    </section>
  </bodydiv>
</bodydiv>

Images

The first <image> within a <card> places an image to the top of the card

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

<grid-row>
  <grid-col>
    <card>
      <image href="..." />
      <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
    </card>
  </grid-col>
</grid-row>

<bodydiv outputclass="row">
  <bodydiv outputclass="col">
    <section outputclass="card w-50">
      <image outputclass="card-img-top" href="..." />
      <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
    </section>
  </bodydiv>
</bodydiv>

Header and footer

Add an optional header and/or footer within a card using the <card-header> and <card-footer> elements.

Featured

Special title treatment

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

Go somewhere

2 days ago

<grid-row>
  <grid-col>
    <card>
      <card-header>Featured</card-header>
      <title>Special title treatment</title>
      <p>With supporting text below as a natural lead-in to additional content.</p>
      <button href="#">Go somewhere</button>
      <card-footer>2 days ago</card-footer>
    </card>
  </grid-col>
</grid-row>

<bodydiv outputclass="row">
  <bodydiv outputclass="col">
    <section outputclass="card w-50">
      <div outputclass="card-header">Featured</div>
      <title outputclass="h5">Special title treatment</title>
      <p>With supporting text below as a natural lead-in to additional content.</p>
      <xref href="#" outputclass="btn-primary">Go somewhere</xref>
    </section>
  </bodydiv>
</bodydiv>

Card Colors

A card can be colorized by adding a @color attribute. This applies a contextual background color.

Card Title

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

Go Somewhere

<grid-row>
  <grid-col>
    <card color="success">
      <title>Card Title</title>
      <image href="..." />
      <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
      <button href="#">Go Somewhere</button>
    </card>
  </grid-col>
</grid-row>