...
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">  <img src="image.jpg" class="card-img-top" alt="...">    <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>      <a href="#" class="btn btn-primary">Go somewhere</a>    </div></div>

Content Types


Body
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 title
Card subtitle

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

Card linkAnother link
<div class="card">  <div class="card-body">    <h5 class="card-title">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></div>
Images
...

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

<div class="card">  <img src="image.jpg" class="card-img-top" alt="...">    <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>
Body
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>
List groups
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card">  <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">  <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>
Header and footer
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>
Quote

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

Someone famous in Source Title
<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>
Using grid markup
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="row">  <div class="col-sm-6">    <div class="card">      <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>  </div>  <div class="col-sm-6">    <div class="card">      <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>  </div></div>
Navigation
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 pb-0">    <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="#" tabindex="-1" aria-disabled="true">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 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="#" tabindex="-1" aria-disabled="true">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>