Card
Example
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 src="../assets/images/blog/blog-img-1.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>Card with List
Card title
- An item
- A second item
- A third item
<div class="card"
style="width: 18rem">
<img src="../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<ul class="mb-0">
<li>An item</li>
<li>A second item</li>
<li>A third item</li>
</ul>
</div>
</div>Card Image Overlay
<div class="card text-white overflow-hidden" style="max-width: 30rem">
<img class="card-img-top" src="../assets/images/blog/blog-img-1.jpg" 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
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" style="max-width: 540px">
<div class="row g-0">
<div class="col-md-5">
<img
src="../assets/images/blog/blog-img-1.jpg"
class="img-fluid rounded-start"
alt="..."
/>
</div>
<div class="col-md-7">
<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-body-secondary">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
</div>Card Group
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 card has supporting text below as a natural lead-in to additional content.
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 card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
<div class="card-group">
<div class="card">
<img src="../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="..."
/>
<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-body-secondary">Last updated 3 mins ago</small>
</p>
</div>
</div>
<div class="card">
<img src="../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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-body-secondary">Last updated 3 mins ago</small>
</p>
</div>
</div>
<div class="card">
<img src="../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="..."
/>
<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 card has even longer content than the first to show that equal height
action.
</p>
<p class="card-text">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>Card Background and color
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="row g-4">
<div class="col-lg-4 col-md-6 col-12">
<div class="card text-bg-primary mb-3">
<div class="card-header bg-transparent">Header</div>
<div class="card-body">
<h5 class="card-title">Primary 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card text-bg-secondary mb-3">
<div class="card-header bg-transparent">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card text-bg-success mb-3">
<div class="card-header bg-transparent">Header</div>
<div class="card-body">
<h5 class="card-title">Success 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card text-bg-danger mb-3">
<div class="card-header bg-transparent">Header</div>
<div class="card-body">
<h5 class="card-title">Danger 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card text-bg-warning mb-3">
<div class="card-header bg-transparent">Header</div>
<div class="card-body">
<h5 class="card-title">Warning 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card text-bg-info mb-3">
<div class="card-header bg-transparent">Header</div>
<div class="card-body">
<h5 class="card-title">Info 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card text-bg-gray-100 mb-3">
<div class="card-header bg-transparent">Header</div>
<div class="card-body">
<h5 class="card-title">Light 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card text-bg-dark mb-3">
<div class="card-header bg-transparent">Header</div>
<div class="card-body">
<h5 class="card-title">Dark 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>
</div>
</div>
</div>Card Border
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="row g-3">
<div class="col-lg-4 col-md-6 col-12">
<div class="card border-primary mb-3">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card border-secondary mb-3">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card border-success mb-3">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card border-danger mb-3">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card border-warning mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card border-info mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card border-light mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light 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>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="card border-dark mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark 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>
</div>
</div>
</div>