Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
Cards on BootstrapBasic Example
<div class="card" style="max-width:20rem;">
<img class="card-img-top" src="../../assets/img/generic/66.jpg" alt="..." />
<div class="card-body">
<h5 class="card-title">Title goes here</h5>
<p class="card-text">Here is the example of the Multiple Container Sortable feature of the </p>
<button class="btn btn-primary">Go somewhere</button>
</div>
</div>
Title goes here
Here is the example of the Multiple Container Sortable feature of the
Card with list
<div class="card p-3" style="max-width:20rem;">
<a class="dropdown-item fw-bold text-warning" href="#!">
<span class="fas fa-crown me-1"></span>
<span>Go Pro</span>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#!">Set status</a>
<a class="dropdown-item" href="#!">Profile & account</a>
<a class="dropdown-item" href="#!">Feedback</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#!">Settings</a>
<a class="dropdown-item" href="#!">Logout</a>
</div>Image overlays
<div class="card text-white overflow-hidden" style="max-width:30rem;">
<img class="card-img-top" src="../../assets/img/generic/46.png" alt="..." />
<div class="card-img-overlay d-flex align-items-end">
<div>
<h4 class="card-title text-white">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>
</div>
Horizontal
<div class="card" style="max-width:32rem;">
<div class="row g-0">
<div class="col-md-4">
<img class="img-fluid h-100 rounded-start" src="../../assets/img/generic/36.png" alt="..." />
</div>
<div class="col-md-8">
<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>
</div>
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 Groups
<div class="card-group">
<div class="card">
<img class="card-img-top" src="../../assets/img/generic/54.png" alt="..." />
<div class="card-body">
<h4 class="card-title">First 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 45 mins ago</small>
</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../../assets/img/generic/44.png" alt="..." />
<div class="card-body">
<h4 class="card-title">First 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 45 mins ago</small>
</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../../assets/img/generic/46.png" alt="..." />
<div class="card-body">
<h4 class="card-title">First 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 45 mins ago</small>
</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="../../assets/img/generic/45.png" alt="..." />
<div class="card-body">
<h4 class="card-title">First card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in 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 45 mins ago</small>
</p>
</div>
</div>
</div>
First 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 45 mins ago
First 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 45 mins ago
First 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 45 mins ago
First card title
This is a wider card with supporting text below as a natural lead-in a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 45 mins ago
Card Background Styles
<div class="row g-4">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card text-white bg-primary">
<div class="card-body">
<h4 class="card-title text-white">Primary Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card text-white bg-secondary">
<div class="card-body">
<h4 class="card-title text-white">Secondary Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card text-white bg-success">
<div class="card-body">
<h4 class="card-title text-white">Success Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card text-white bg-danger">
<div class="card-body">
<h4 class="card-title text-white">Danger Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card text-white bg-warning">
<div class="card-body">
<h4 class="card-title text-white">Warning Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card text-white bg-info">
<div class="card-body">
<h4 class="card-title text-white">Info Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card text-dark bg-light">
<div class="card-body">
<h4 class="card-title text-dark">Light Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card text-white bg-dark">
<div class="card-body">
<h4 class="card-title text-white">Dark Card </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>
</div>Primary Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Success Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Info Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Light Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Border Styles
<div class="row g-4">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border border-primary">
<div class="card-body">
<h4 class="card-title">Primary Border Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border border-secondary">
<div class="card-body">
<h4 class="card-title">Secondary Border Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border border-success">
<div class="card-body">
<h4 class="card-title">Success Border Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border border-danger">
<div class="card-body">
<h4 class="card-title">Danger Border Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border border-warning">
<div class="card-body">
<h4 class="card-title">Warning Border Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border border-info">
<div class="card-body">
<h4 class="card-title">Info Border Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border border-light">
<div class="card-body">
<h4 class="card-title">Light Border Card </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>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border border-dark">
<div class="card-body">
<h4 class="card-title">Dark Border Card </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>
</div>Primary Border Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary Border Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Success Border Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger Border Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning Border Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Info Border Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Light Border Card
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark Border Card
Some quick example text to build on the card title and make up the bulk of the card's content.
