Card
Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
Card basic
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.
Card title
Card subtitle
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>
Card types
oggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Card title
Card subtitle
Some 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>
Header and Footer
Add an optional header and/or footer within a card. Card headers can also be styled by adding .card-header to heading elements.
Special title treatment
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>
Titles, text, and links
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.
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 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>
Kitchen sink
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.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- An item
- A second item
- A third item
<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>
Image overlays
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>
Horizontal
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
Card title
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>
Card sizes
Use classes .card-lg, card-sm for sizes.
Card lg
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card sm
Card subtitle
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>
Navigation
Add some navigation to a card’s header (or block) with Bootstrap’s nav components.
Card with Nav Tabs
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>
Card Groups
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.
Card One
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 Two
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card Three
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>
Background and color
Use text color and background utilities to change the appearance of a card.
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.
<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>
Border
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.
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.
<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>
Card with action
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.
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard Header
Special Title Treatment
With 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>
Action in Card Body
Instead of card header you can also add close action inside card-body.
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial Title Treatment
With 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>
Card with Indicators
Use badges and badge indicators with cards.
Card Header
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard Header
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard Header
Special Title Treatment
With 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>
Card with table
Use tables inside cards
Card Header
| # | 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>
Card with icons
Use icons with card header.
Jampack heading
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>
Card with badge
Use badges in card header.
Card with badge
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>
Card with headings
Mix and match headings in cards.
Special Title Treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard with icon sub heading
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-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>
Card with progress bar
Use progress bars with cards.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
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>
Card with line
Check the cards with line stylization.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
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>
Card with Image Carousel
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
}
}
});