Cards
Card title
Some quick example text to build on the card title and make up the bulk of the card's content. With supporting text below as a natural lead-in to additional content.
Button
Card title
Some quick example text to build on the card title.
- Dapibus ac facilisis in
Some quick example text to build on the card title and make up the bulk of the card's content. With supporting text below as a natural lead-in to additional content.
Button
<div class="card mb-3 mb-xl-0">
<img class="card-img-top img-fluid" src="assets/images/small/img-1.jpg" alt="img-1">
<div class="card-body">
<h5 class="card-title mb-2">Card title</h5>
<p class="card-text text-muted">
Some quick example text to build on the card title and make
up the bulk of the card's content. With supporting text below as
a natural lead-in to additional content.
</p>
<a href="javascript:void(0);" class="btn btn-primary">Button</a>
</div> <!-- end card body -->
</div> <!-- end card -->
<div class="card mb-3">
<img class="card-img-top img-fluid" src="assets/images/small/img-2.jpg" alt="img-2">
<div class="card-body">
<h5 class="card-title mb-2">Card title</h5>
<p class="card-text text-muted">Some quick example text to build on the card title.</p>
</div> <!-- end card body -->
<ul class="list-group list-group-flush text-muted">
<li class="list-group-item text-muted">Dapibus ac facilisis in</li>
</ul>
<div class="card-body">
<a href="javascript:void(0);" class="card-link text-primary">Card link</a>
<a href="javascript:void(0);" class="card-link text-primary">Another link</a>
</div>
</div> <!-- end card -->
<div class="card mb-3 mb-xl-0">
<img class="card-img-top img-fluid" src="assets/images/small/img-4.jpg" alt="img-4">
<div class="card-body">
<p class="card-text text-muted">
Some quick example text to build on the card title and make
up the bulk of the card's content. With supporting text below as
a natural lead-in to additional content.
</p>
<a href="javascript:void(0);" class="btn btn-primary">Button</a>
</div> <!-- end card body -->
</div> <!-- end card -->
<div class="card mb-3 mb-xl-0">
<div class="card-body">
<h5 class="card-title mb-0">Card title</h5>
</div>
<img class="img-fluid" src="assets/images/small/img-5.jpg" alt="img-5">
<div class="card-body">
<p class="card-text text-muted">Some quick example text to build on the card title.</p>
<a href="javascript:void(0);" class="card-link text-primary">Card link</a>
<a href="javascript:void(0);" class="card-link text-primary">Another link</a>
</div> <!-- end card body -->
</div> <!-- end card -->
<div class="card card-body">
<h5 class="card-title mb-1">Special title treatment</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript: void(0);" class="btn btn-primary">Go somewhere</a>
</div> <!-- end card-->
<div class="card card-body">
<h5 class="card-title mb-1">Special title treatment</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript: void(0);" class="btn btn-primary">Go somewhere</a>
</div> <!-- end card-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title mb-1">Special title treatment</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript: void(0);" class="btn btn-primary">Go somewhere</a>
</div> <!-- end card-body-->
</div> <!-- end card-->
<div class="card">
<div class="card-header">Quote</div>
<div class="card-body">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite>Source Title</cite></footer>
</blockquote>
</div> <!-- end card-body-->
</div> <!-- end card-->
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<a href="javascript: void(0);" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">2 days ago</div>
</div> <!-- end card-->
Card Colored
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div class="card text-bg-primary">
<div class="card-body">
<h5 class="card-title text-white mb-2">Special title treatment</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="javascript: void(0);" class="btn btn-light btn-sm">Button</a>
</div> <!-- end card-body-->
</div> <!-- end card-->
<div class="card bg-secondary text-white">
<div class="card-body">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div> <!-- end card-body-->
</div> <!-- end card-->
<div class="card text-bg-success">
<div class="card-body">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div> <!-- end card-body-->
</div> <!-- end card-->
<div class="card text-bg-info">
<div class="card-body">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div> <!-- end card-body-->
</div> <!-- end card-->
<div class="card text-bg-warning">
<div class="card-body">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div> <!-- end card-body-->
</div> <!-- end card-->
<div class="card text-bg-danger">
<div class="card-body">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div> <!-- end card-body-->
</div> <!-- end card-->
Card Bordered
Special title treatment
With supporting text below as a natural lead-in to additional content.
ButtonSpecial title treatment
With supporting text below as a natural lead-in to additional content.
ButtonSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Button
<div class="card border-primary border">
<div class="card-body">
<h5 class="card-title text-primary mb-2">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
<a href="javascript: void(0);" class="btn btn-primary btn-sm">Button</a>
</div> <!-- end card-body-->
</div> <!-- end card-->
<div class="card border-secondary border">
<div class="card-body">
<h5 class="card-title mb-2">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
<a href="javascript: void(0);" class="btn btn-secondary btn-sm">Button</a>
</div> <!-- end card-body-->
</div> <!-- end card-->
<div class="card border-success border">
<div class="card-body">
<h5 class="card-title mb-2 text-success">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
<a href="javascript: void(0);" class="btn btn-success btn-sm">Button</a>
</div> <!-- end card-body-->
</div> <!-- end card-->
Horizontal 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">
<div class="row g-0">
<div class="col-md-4">
<img src="assets/images/small/img-1.jpg" class="img-fluid rounded-start h-100" alt="img-1">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title mb-2">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> <!-- end card-body-->
</div> <!-- end col -->
</div> <!-- end row-->
</div> <!-- end card-->
<div class="card">
<div class="row g-0">
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title mb-2">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> <!-- end card-body -->
</div> <!-- end col -->
<div class="col-md-4">
<img src="assets/images/small/img-2.jpg" class="img-fluid rounded-end h-100" alt="img-2">
</div> <!-- end col -->
</div> <!-- end row-->
</div> <!-- end card -->
Stretched link
Card with stretched link
Go somewhere
Card with stretched link
Some quick example text to build on the card up the bulk of the card's content.
Card with stretched link
Go somewhere
Card with stretched link
Some quick example text to build on the card up the bulk of the card's content.
<div class="card">
<img src="assets/images/small/img-1.jpg" class="card-img-top" alt="img-1">
<div class="card-body">
<h5 class="card-title mb-2">Card with stretched link</h5>
<a href="javascript:void(0);" class="btn btn-primary mt-2 stretched-link">Go somewhere</a>
</div> <!-- end card-body -->
</div> <!-- end card -->
<div class="card">
<img src="assets/images/small/img-2.jpg" class="card-img-top" alt="img-2">
<div class="card-body">
<h5 class="card-title mb-2"><a href="javascript:void(0);" class="text-primary stretched-link">Card with stretched link</a></h5>
<p class="card-text">
Some quick example text to build on the card up the bulk of the card's content.
</p>
</div> <!-- end card-body -->
</div> <!-- end card -->
<div class="card">
<img src="assets/images/small/img-3.jpg" class="card-img-top" alt="img-3">
<div class="card-body">
<h5 class="card-title mb-2">Card with stretched link</h5>
<a href="javascript:void(0);" class="btn btn-primary mt-2 stretched-link">Go somewhere</a>
</div> <!-- end card-body -->
</div> <!-- end card -->
<div class="card">
<img src="assets/images/small/img-4.jpg" class="card-img-top" alt="img-4">
<div class="card-body">
<h5 class="card-title mb-2"><a href="javascript:void(0);" class="stretched-link">Card with stretched link</a></h5>
<p class="card-text">
Some quick example text to build on the card up the bulk of the card's content.
</p>
</div> <!-- end card-body -->
</div> <!-- end card -->
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 d-block">
<img class="card-img-top" src="assets/images/small/img-1.jpg" alt="img-1">
<div class="card-body">
<h5 class="card-title mb-2">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 d-block">
<img class="card-img-top" src="assets/images/small/img-2.jpg" alt="img-2">
<div class="card-body">
<h5 class="card-title mb-2">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-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<div class="card d-block">
<img class="card-img-top" src="assets/images/small/img-3.jpg" alt="img-3">
<div class="card-body">
<h5 class="card-title mb-2">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-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div> <!-- end card-group-->
Card Decks
Card title
This is a longer 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 longer 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 longer 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">
<img src="assets/images/small/img-4.jpg" class="card-img-top" alt="img-4">
<div class="card-body">
<h5 class="card-title mb-2">Card title</h5>
<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><!-- end card-body -->
</div><!-- end card -->
<div class="card">
<img src="assets/images/small/img-3.jpg" class="card-img-top" alt="img-3">
<div class="card-body">
<h5 class="card-title mb-2">Card title</h5>
<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><!-- end card-body -->
</div><!-- end card -->
<div class="card">
<img src="assets/images/small/img-2.jpg" class="card-img-top" alt="img-2">
<div class="card-body">
<h5 class="card-title mb-2">Card title</h5>
<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><!-- end card-body -->
</div><!-- end card -->