#### Card

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

Table of Content

- Examples
- Content types
  1. Body
  2. Titles, text, and links
  3. Images
  4. List groups
  5. Kitchen sink
  6. Header and footer
- Text alignment
- Navigation
- Images
  1. Image Overlay

#### Examples

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

    								<div class="card" style="width: 18rem;">
    									<img class="card-img-top" src="..." alt="Card image cap">
    									<div class="card-body">
    										<h5 class="card-title mb-2 fw-mediumbold">Card title</h5>
    										<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-warning">Go somewhere</a>
    									</div>
    								</div>

#### Content types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

##### Body

The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card.

This is some text within a card body.

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

##### Titles, text, and links

Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, links are added and placed next to each other by adding `.card-link` to an `<a>` tag.

Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely.

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

    								<div class="card-body">
    									<h5 class="card-title mb-3">Card title</h5>
    									<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>

##### Images

`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.

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

    								<div class="card" style="width: 18rem;">
    									<img class="card-img-top" src="../../assets/img/blogpost.jpg" 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

Create lists of content in a card with a flush list group.

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

    								<div class="card" style="width: 18rem;">
    									<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>

Featured

- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

    								<div class="card" style="width: 18rem;">
    									<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 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.

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

    								<div class="card" style="width: 18rem;">
    									<img class="card-img-top" src="../../assets/img/blogpost.jpg" alt="Card image cap">
    									<div class="card-body">
    										<h5 class="card-title">Card title</h5>
    										<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 header and/or footer within a card.

Featured

##### Special title treatment

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

Go somewhere

    								<div class="card">
    									<div class="card-header">
    										Featured
    									</div>
    									<div class="card-body">
    										<h5 class="card-title">Special title treatment</h5>
    										<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>

Card headers can be styled by adding `.card-header` to `<h*>` elements.

##### Featured

##### Special title treatment

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

Go somewhere

    								<div class="card">
    									<h5 class="card-header">Featured</h5>
    									<div class="card-body">
    										<h5 class="card-title">Special title treatment</h5>
    										<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>

Quote

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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

Featured

##### Special title treatment

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

Go somewhere

    								<div class="card text-center">
    									<div class="card-header">
    										Featured
    									</div>
    									<div class="card-body">
    										<h5 class="card-title">Special title treatment</h5>
    										<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>

#### Text alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.

#### Special title treatment

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

Go somewhere

#### Special title treatment

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

Go somewhere

#### Special title treatment

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

Go somewhere

    								<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

Add some navigation to a card’s header (or block) with Bootstrap’s nav components.

##### Special title treatment

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

Go somewhere

    								<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">
    										<h5 class="card-title">Special title treatment</h5>
    										<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>

##### Special title treatment

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

Go somewhere

    								<div class="card text-center">
    									<div class="card-header">
    									<ul class="nav nav-pills nav-primary 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">
    										<h5 class="card-title">Special title treatment</h5>
    										<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>

#### Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

##### Image caps

Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.

##### Card title

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

Last updated 3 mins ago

##### Card title

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

Last updated 3 mins ago

    								<div class="card mb-3">
    									<img class="card-img-top" src="http://via.placeholder.com/780x180" alt="Card image cap">
    									<div class="card-body">
    										<h5 class="card-title">Card title</h5>
    										<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">
    										<h5 class="card-title">Card title</h5>
    										<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="http://via.placeholder.com/780x180" alt="Card image cap">
    								</div>

##### Image overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

##### Card title

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

Last updated 3 mins ago

    								<div class="card bg-black text-white">
    									<img class="card-img" src="http://via.placeholder.com/780x180" alt="Card image">
    									<div class="card-img-overlay">
    										<h5 class="card-title text-white">Card title</h5>
    										<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>