Bootstrap's card provides a flexible and extensible content container with a variety of variants and options.

about

A card is a flexible, extensible content container. It includes header and footer options, various content, context, background color, and powerful display options.

If you are familiar with Bootstrap 3, the card can replace our old panels, wells and thumbnails. Functions similar to these components can be used as modifiers for cards.

Example

Cards have as few tags and styles as possible, but still try to provide a lot of control and customization. Built with flexbox, they can be easily aligned and well mixed with other Bootstrap components.

The following is an example of a basic card with mixed content and fixed width. Cards do not start with a fixed width, so they naturally fill the entire width of their parent element. This is easy to customize with our various size options.

<div class="card" style="width: 20rem;">  <img class="card-img-top" src="..." alt="Card image cap">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

Content type

The card supports various contents, including images, text, lists, groups, links, etc. The following are examples of support.

constitute

The building block of the card is. Card body. As long as you need the filling part of the card, use it.

<div class="card">  <div class="card-body">
    This is some text within a card body.  </div></div>

Title, text and links

The card title is used by adding a. Card title to the < h * > tag. In the same way, links are added and placed adjacent to each other by adding. Card link to the < a > tag.

Subtitles are created by adding a. Card subtitle to the < h * > tag. If the. Card title and. Card subtitle items are placed in a. Card body item, the card title and subtitle are well aligned.

<div class="card" style="width: 20rem;">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>    <a href="#" class="card-link">Card link</a>    <a href="#" class="card-link">Another link</a>  </div></div>

picture

. card img top places the image on top of the card. Contains. Card text, text can be added to the card. The text in the text. Card text can also be styled with standard HTML tags.

<div class="card" style="width: 20rem;">  <img class="card-img-top" src="..." alt="Card image cap">  <div class="card-body">    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div>

List groups

Use the refresh list group to create a list of contents in the card.

<div class="card" style="width: 20rem;">  <ul class="list-group list-group-flush">    <li class="list-group-item">Cras justo odio</li>    <li class="list-group-item">Dapibus ac facilisis in</li>    <li class="list-group-item">Vestibulum at eros</li>  </ul></div>

<div class="card" style="width: 20rem;">  <div class="card-header">
    Featured  </div>  <ul class="list-group list-group-flush">    <li class="list-group-item">Cras justo odio</li>    <li class="list-group-item">Dapibus ac facilisis in</li>    <li class="list-group-item">Vestibulum at eros</li>  </ul></div>

Kitchen sink

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

<div class="card" style="width: 20rem;">  <img class="card-img-top" src="..." alt="Card image cap">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div>  <ul class="list-group list-group-flush">    <li class="list-group-item">Cras justo odio</li>    <li class="list-group-item">Dapibus ac facilisis in</li>    <li class="list-group-item">Vestibulum at eros</li>  </ul>  <div class="card-body">    <a href="#" class="card-link">Card link</a>    <a href="#" class="card-link">Another link</a>  </div></div>

header and footer

Add an optional title and / or footer to the card.

<div class="card">  <div class="card-header">
    Featured  </div>  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

The card head can be set to < h * > elements by adding the style. Card header.

<div class="card">  <h4 class="card-header">Featured</h4>  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

<div class="card">  <div class="card-header">
    Quote  </div>  <div class="card-body">    <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>  </div></div>

<div class="card text-center">  <div class="card-header">
    Featured  </div>  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div>  <div class="card-footer text-muted">    2 days ago  </div></div>

Measurement size

Cards do not have a specific width start, so unless otherwise stated, they will be 100% wide. You can use custom CSS, grid classes, grid Sass mixins or utilities to change this setting as needed.

Use grid markers

Using grids, pack cards into rows and columns as needed.

<div class="row">  <div class="col-sm-6">    <div class="card">      <div class="card-body">        <h4 class="card-title">Special title treatment</h4>        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>        <a href="#" class="btn btn-primary">Go somewhere</a>      </div>    </div>  </div>  <div class="col-sm-6">    <div class="card">      <div class="card-body">        <h4 class="card-title">Special title treatment</h4>        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>        <a href="#" class="btn btn-primary">Go somewhere</a>      </div>    </div>  </div></div>

Using utilities

Use some of our available size setting tools to quickly set the width of the card.

<div class="card w-75">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Button</a>  </div></div><div class="card w-50">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Button</a>  </div></div>

Using custom CSS

Use custom CSS in the style sheet or use inline styles to set the width.

<div class="card" style="width: 20rem;">  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

align text

You can use our text alignment class to quickly change the text alignment of any card - whole or specific parts.

<div class="card" style="width: 20rem;">  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div><div class="card text-center" style="width: 20rem;">  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div><div class="card text-right" style="width: 20rem;">  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

Navigation

Use the navigation component of Bootstrap to add some navigation to the title (or block) of the card.

<div class="card text-center">  <div class="card-header">    <ul class="nav nav-tabs card-header-tabs">      <li class="nav-item">        <a class="nav-link active" href="#">Active</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Link</a>      </li>      <li class="nav-item">        <a class="nav-link disabled" href="#">Disabled</a>      </li>    </ul>  </div>  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

<div class="card text-center">  <div class="card-header">    <ul class="nav nav-pills card-header-pills">      <li class="nav-item">        <a class="nav-link active" href="#">Active</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Link</a>      </li>      <li class="nav-item">        <a class="nav-link disabled" href="#">Disabled</a>      </li>    </ul>  </div>  <div class="card-body">    <h4 class="card-title">Special title treatment</h4>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>

picture

The card includes options for processing images. Choose to add "image case" at either end of the card to overlay the image with the card content, or embed the image into the card.

Image upper limit

Like headers and footers, cards can include "image caps" at the top and bottom - images at the top or bottom of the image.

<div class="card mb-3">  <img class="card-img-top" src="..." alt="Card image cap">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <p class="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.</p>    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>  </div></div><div class="card">  <div class="card-body">    <h4 class="card-title">Card title</h4>    <p class="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.</p>    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>  </div>  <img class="card-img-bottom" src="..." alt="Card image cap"></div>

Image overlay

Convert the image to the card background and overwrite the text of the card. Depending on the image, you may or may not need other styles or utilities.

<div class="card bg-dark text-white">  <img class="card-img" src="..." alt="Card image">  <div class="card-img-overlay">    <h4 class="card-title">Card title</h4>    <p class="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.</p>    <p class="card-text">Last updated 3 mins ago</p>  </div></div>

Card style

The card includes various options for customizing the background, border and color.

Background and color

Use the text and background utility to change the appearance of the card.

<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Primary card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Secondary card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card text-white bg-success mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Success card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card text-white bg-danger mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Danger card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card text-white bg-warning mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Warning card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card text-white bg-info mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Info card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card bg-light mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Light card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card text-white bg-dark mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Dark card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div>

Transfer meaning to assistive technology
Using color to add meaning can only provide a visual indication, not to the users of assistive technology, such as screen readers. Make sure that the information represented by color comes either from the content itself (such as visible text) or is included in other ways, such as other text hidden in the. SR only class.

border

Use the border utility to change the border color of only one card. Note that you can place the. text-{color} class on the parent. Card card or a subset of the card content, as shown below.

<div class="card border-primary mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-primary">    <h4 class="card-title">Primary card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-secondary mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-secondary">    <h4 class="card-title">Secondary card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-success mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-success">    <h4 class="card-title">Success card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-danger mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-danger">    <h4 class="card-title">Danger card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-warning mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-warning">    <h4 class="card-title">Warning card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-info mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-info">    <h4 class="card-title">Info card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-light mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body">    <h4 class="card-title">Light card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div><div class="card border-dark mb-3" style="max-width: 20rem;">  <div class="card-header">Header</div>  <div class="card-body text-dark">    <h4 class="card-title">Dark card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div></div>

Mixins utility

You can also change the boundaries required for headers and footers on the card, or even replace their background color with. BG transparent deletion.

<div class="card border-success mb-3" style="max-width: 20rem;">  <div class="card-header bg-transparent border-success">Header</div>  <div class="card-body text-success">    <h4 class="card-title">Success card title</h4>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  </div>  <div class="card-footer bg-transparent border-success">Footer</div></div>

Card layout

In addition to modeling the contents of the card, Bootstrap also includes some options for arranging a series of cards. Currently, these layout options have not responded.

Card set

Use a deck to render cards as a single additional element with columns of the same width and height. The card set uses display: flex; To achieve uniform size.

<div class="card-group">  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="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.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="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.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div></div>

When you use a card set with a footer, its contents are arranged automatically.

<div class="card-group">  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="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.</p>    </div>    <div class="card-footer">      <small class="text-muted">Last updated 3 mins ago</small>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>    </div>    <div class="card-footer">      <small class="text-muted">Last updated 3 mins ago</small>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="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.</p>    </div>    <div class="card-footer">      <small class="text-muted">Last updated 3 mins ago</small>    </div>  </div></div>

Card platform

You need a set of cards of equal width and height. These cards are not connected to each other? Use the card platform.

<div class="card-deck">  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="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.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div></div>

Just like a deck, the card feet in the deck are automatically queued.

<div class="card-deck">  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="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.</p>    </div>    <div class="card-footer">      <small class="text-muted">Last updated 3 mins ago</small>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>    </div>    <div class="card-footer">      <small class="text-muted">Last updated 3 mins ago</small>    </div>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="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.</p>    </div>    <div class="card-footer">      <small class="text-muted">Last updated 3 mins ago</small>    </div>  </div></div>

Card column

Cards can be wrapped in CSS and organized into Mason like columns. Card columns using CSS only. Cards are built using CSS column properties instead of Flexbox to facilitate alignment. Cards are arranged from top to bottom and from left to right.

Look up! The mileage of Carlyle may vary. To prevent card hurdles, we must set them to display: inline block to column break inside: avoid is not a bulletproof solution.

<div class="card-columns">  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title that wraps to a new line</h4>      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>    </div>  </div>  <div class="card p-3">    <blockquote class="blockquote mb-0 card-body">      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>      <footer class="blockquote-footer">        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>        </small>      </footer>    </blockquote>  </div>  <div class="card">    <img class="card-img-top" src="..." alt="Card image cap">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div>  <div class="card bg-primary text-white text-center p-3">    <blockquote class="blockquote mb-0">      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>      <footer class="blockquote-footer">        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>        </small>      </footer>    </blockquote>  </div>  <div class="card text-center">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div>  <div class="card">    <img class="card-img" src="..." alt="Card image">  </div>  <div class="card p-3 text-right">    <blockquote class="blockquote mb-0">      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>      <footer class="blockquote-footer">        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>        </small>      </footer>    </blockquote>  </div>  <div class="card">    <div class="card-body">      <h4 class="card-title">Card title</h4>      <p class="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.</p>      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>    </div>  </div></div>

Card columns can also be extended and customized with some additional code. Shown below is an extension of the. Card columns class that uses the same CSS as the CSS columns -- generating a set of response layers for changing the number of columns.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;  }
  @include media-breakpoint-only(xl) {
    column-count: 5;  }}