Bootstrap Card
with
.card-custom
class to provide a wide range of options for multi-purpose cards.
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
Basic Card
<small>sub title</small>
</h3>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
Basic Card
<small>sub title</small>
</h3>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
Basic Card
<small>sub title</small>
</h3>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
Basic Card
<small>sub title</small>
</h3>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
Basic Card
<small>sub title</small>
</h3>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom gutter-b">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">
Basic Card
<small>sub title</small>
</h3>
</div>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom">
<div class="card-header">
<div class="card-title">
<span class="card-icon">
<i class="flaticon2-chat-1 text-primary"></i>
</span>
<h3 class="card-label">
Card Footer
<small>sub title</small>
</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-sm btn-success font-weight-bold">
<i class="flaticon2-cube"></i> Reports
</a>
</div>
</div>
<div class="card-body">
...
</div>
<div class="card-footer d-flex justify-content-between">
<a href="#" class="btn btn-light-primary font-weight-bold">Manage</a>
<a href="#" class="btn btn-outline-secondary font-weight-bold">Learn more</a>
</div>
</div>
<div class="card card-custom">
<div class="card-header">
<div class="card-title">
<span class="card-icon">
<i class="flaticon2-chat-1 text-primary"></i>
</span>
<h3 class="card-label">
Scrollable Content
</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-sm btn-light-primary font-weight-bold">
<i class="flaticon2-cube"></i> Settings
</a>
</div>
</div>
<div class="card-body">
<div data-scroll="true" data-height="200">
....
</div>
</div>
<div class="card-footer d-flex justify-content-between">
<a href="#" class="btn btn-light-primary font-weight-bold">Manage</a>
<a href="#" class="btn btn-outline-secondary font-weight-bold">Learn more</a>
</div>
</div>
<div class="card card-custom bg-primary">
<div class="card-header border-0">
<div class="card-title">
<span class="card-icon">
<i class="flaticon2-chat-1 text-white"></i>
</span>
<h3 class="card-label text-white">
Primary Background Color
</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-sm btn-white">
<i class="flaticon2-cube"></i> Settings
</a>
</div>
</div>
<div class="separator separator-solid separator-white opacity-20"></div>
<div class="card-body text-white">
...
</div>
</div>
<div class="card card-custom bg-success">
<div class="card-header border-0">
<div class="card-title">
<span class="card-icon">
<i class="flaticon2-chat-1 text-white"></i>
</span>
<h3 class="card-label text-white">
Success Background Color
</h3>
</div>
<div class="card-toolbar">
<a href="#" class="btn btn-sm btn-white font-weight-bold">
<i class="flaticon2-cube"></i> Settings
</a>
</div>
</div>
<div class="separator separator-solid separator-white opacity-20"></div>
<div class="card-body text-white">
...
</div>
</div>