Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.
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 class="card-img-top" src="dist/img/placeholder_card.jpg" alt="Card image cap">
<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="btn btn-primary">Go somewhere</a>
</div>
</div>
oggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
<div class="col-xl-4 col-sm-6 col-xs-12">
<div class="card card-border">
<img class="card-img-top" src="dist/img/placeholder_card.jpg" alt="Card image cap">
<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="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-xl-4 col-sm-6 col-xs-12">
<div class="card card-shadow">
<img class="card-img-top" src="dist/img/placeholder_card.jpg" alt="Card image cap">
<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="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-xl-4 col-sm-6 col-xs-12">
<div class="card card-flush">
<img class="card-img-top" src="dist/img/placeholder_card.jpg" alt="Card image cap">
<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="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
Add an optional header and/or footer within a card. Card headers can also be styled by adding .card-header
to heading elements.
With supporting text below as a natural lead-in to additional content.
Go somewhere
<div class="card">
<div class="card-header">
Card Header
</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">
Card Footer
</div>
</div>
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.
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">
<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>
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.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">
<img class="card-img-top" src="dist/img/placeholder_card.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">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
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.
<div class="card bg-dark text-white">
<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image">
<div class="card-img-overlay">
<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">Last updated 3 mins ago</p>
</div>
</div>
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
This is a wider card with supporting text.
<div class="card">
<div class="row g-0">
<div class="col-md-4">
<img class="img-fluid rounded-start" src="dist/img/placeholder_card_1.jpg" alt="Card image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text.</p>
</div>
</div>
</div>
</div>
Use classes .card-lg, card-sm
for sizes.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="row">
<div class="col-xl-4 col-sm-6 col-xs-12">
<div class="card card-lg">
<div class="card-body">
<h5 class="card-title">Card lg</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>
</div>
</div>
</div>
<div class="col-xl-4 col-sm-6 col-xs-12">
<div class="card card-sm">
<div class="card-body">
<h5 class="card-title">Card sm</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>
</div>
</div>
</div>
</div>
Add some navigation to a card’s header (or block) with Bootstrap’s nav components.
With supporting text below as a natural lead-in to additional content.
Go somewhere
<div class="card card-sm card-wth-tabs text-center">
<div class="card-header">
<ul class="nav nav-sm 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">Card with Nav Tabs</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>
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.
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
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
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 class="card-img-top" src="dist/img/placeholder_card.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card One</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">
<img class="card-img-top" src="dist/img/placeholder_card.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card Two</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">
<img class="card-img-top" src="dist/img/placeholder_card.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card Three</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>
Use text color and background utilities to change the appearance of a card.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card text-white bg-primary">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title text-white">Primary Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card text-white bg-secondary ">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title text-white">Secondary Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card text-white bg-success">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title text-white">Success Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card text-white bg-danger">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title text-white">Danger Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card text-white bg-warning">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title text-white">Warning Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card text-white bg-info">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title text-white">Info Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card bg-charcoal-light-5">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card text-white bg-dark">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title text-white">Dark Card</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>
Use border utilities to change just the border-color of a card. Note that you can put .text-{color}
classes on the parent .card or a subset of the card's contents as shown below.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card border-primary">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title text-primary">Primary Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card border-secondary">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title text-secondary">Secondary Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card border-success">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title text-success">Success Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card border-danger">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title text-danger">Danger Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card border-warning">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title text-warning">Warning Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card border-info">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title text-info">Info Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card border">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title text-light-80">Light Card</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-3 col-md-4 col-sm-6 col-xs-12">
<div class="card border-dark">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title text-dark">Dark Card</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>
Add as many actions in a card header. Add .card-header-action
in .card-header
. Given actions are for fullscreen, refresh, close, collapse and dropdown.
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="card card-refresh">
<div class="refresh-container">
<div class="loader-pendulums"></div>
</div>
<div class="card-header card-header-action">
<h6>Card Header</h6>
<div class="card-action-wrap">
<a class="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover" data-bs-toggle="collapse" href="#collapse_1" aria-expanded="true"><span class="icon"><span class="feather-icon"><i data-feather="chevron-down"></i></span></span></a>
<div class="d-flex dropdown">
<a class="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover dropdown dropdown-toggle no-caret" data-bs-toggle="dropdown" href="#" aria-expanded="false"><span class="icon"><span class="feather-icon"><i data-feather="more-horizontal"></i></span></span></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<a class="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover refresh" href="#"><span class="icon"><span class="feather-icon"><i data-feather="disc"></i></span></span></a>
<a class="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover full-screen" href="#"><span class="icon"><span class="feather-icon"><i data-feather="maximize"></i></span><span class="feather-icon d-none"><i data-feather="minimize"></i></span></span></a>
<a class="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover card-close"><span class="icon"><span class="feather-icon"><i data-feather="x"></i></span></span></a>
</div>
</div>
<div id="collapse_1" class="collapse show">
<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>
<div class="col-lg-6 col-sm-12">
<div class="card">
<div class="card-header card-header-action">
<h6>Card Header</h6>
<div class="card-action-wrap">
<div class="dropdown">
<button aria-expanded="false" data-bs-toggle="dropdown" class="btn btn-success btn-sm dropdown-toggle d-flex align-items-center" type="button">Dropdown <span class="caret"></span></button>
<div role="menu" class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</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>
</div>
</div>
Instead of card header you can also add close action inside card-body.
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere
<div class="row">
<div class="col-lg-4 col-sm-12">
<div class="card">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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-lg-4 col-sm-12">
<div class="card close-over">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
Use badges and badge indicators with cards.
With supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhereWith supporting text below as a natural lead-in to additional content.
Go somewhere
<div class="row">
<div class="col-lg-4 col-sm-12">
<div class="card position-relative">
<div class="card-header">
<h6>Card Header</h6>
</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>
<span class="badge badge-success badge-indicator badge-indicator-xl position-top-end-overflow"></span>
</div>
</div>
<div class="col-lg-4 col-sm-12">
<div class="card position-relative">
<div class="card-header">
<h6>Card Header</h6>
</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>
<span class="badge badge-success badge-pill position-top-end-overflow">10</span>
</div>
</div>
<div class="col-lg-4 col-sm-12">
<div class="card card-selected">
<div class="card-header">
<h6>Card Header</h6>
</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>
</div>
</div>
Use tables inside cards
# | Username | Role |
---|---|---|
1 | Brincker123 | admin |
2 | Hay123 | member |
<div class="card">
<div class="card-header">
<h6>Card Header</h6>
</div>
<div class="card-body p-0">
<div class="table-wrap">
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th>#</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Brincker123</td>
<td><span class="badge badge-danger">admin</span> </td>
</tr>
<tr>
<th scope="row">2</th>
<td>Hay123</td>
<td><span class="badge badge-info">member</span> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Use icons with card header.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">
<div class="card-header">
<h6 class="heading-wth-icon">
<span class="head-icon"><i class="ri-funds-box-line"></i></span>
Jampack heading
</h6>
</div>
<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>
Use badges in card header.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">
<div class="card-header">
<h6>Card with badge</h6>
<div class="d-flex">
<span class="badge badge-info">badge</span>
</div>
</div>
<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><div class="card">
<div class="card-header">
<h6>Card with badge</h6>
<div class="d-flex">
<span class="badge badge-info">badge</span>
</div>
</div>
<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>
Mix and match headings in cards.
With supporting text below as a natural lead-in to additional content.
Go somewhereSome quick example text to build on the card title and make up the bulk of the card's content.
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="card">
<div class="card-header card-header-wth-text card-header-action">
<div>
<h6>Card Header</h6>
<p>With supporting text below as a natural</p>
</div>
<div class="card-action-wrap">
<a class="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover full-screen" href="#"><span class="icon"><span class="feather-icon"><i data-feather="maximize"></i></span><span class="feather-icon d-none"><i data-feather="minimize"></i></span></span></a>
<a class="btn btn-xs btn-icon btn-rounded btn-flush-dark flush-soft-hover card-close"><span class="icon"><span class="feather-icon"><i data-feather="x"></i></span></span></a>
</div>
</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>
</div>
<div class="col-lg-4 col-sm-12">
<div class="card">
<div class="card-header">
<h6>Card with icon <small class="text-muted ms-2">sub heading</small></h6>
</div>
<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>
</div>
</div>
Use progress bars with cards.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card card-wth-progress">
<div class="progress progress-bar-xs">
<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</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>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card card-wth-progress">
<div class="progress progress-bar-xs">
<div class="progress-bar bg-warning w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</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>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card card-wth-progress">
<div class="progress progress-bar-xs">
<div class="progress-bar bg-success w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</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>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
Check the cards with line stylization.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
With supporting text below as a natural lead-in to additional content.
<div class="row">
<div class="col-sm-4">
<div class="card card-wth-line">
<div class="card-line bg-primary"></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>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card card-wth-line">
<div class="card-line bg-success"></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>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card card-wth-line">
<div class="card-line bg-warning"></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>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
A card can have carousel within image parent.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">
<div id="owl_demo_6" class="owl-carousel light-owl-dots owl-theme dots-on-item">
<div class="item"><img class="card-img-top" src="dist/img/slide1.jpg" alt="Card image cap"></div>
<div class="item"><img class="card-img-top" src="dist/img/slide2.jpg" alt="Card image cap"></div>
</div>
<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>
$('#owl_demo_6').owlCarousel({
loop:true,
margin:0,
responsiveClass:true,
responsive:{
0:{
items:1
}
}
});