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 fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with Bootstrap’s various sizing options.

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

<bodydiv outputclass="row">
  <bodydiv outputclass="col">
    <section outputclass="card w-50">
      <title outputclass="h5">Card Title</title>
      <div outputclass="h6">Card Subtitle</title>
      <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

Setting @outputclass to card-img-top places an image to the top of the card

<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 @outputclass attribute and adding card-header and card-footer

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