Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. Please read the official Bootstrap documentation for a full list of options.
<div class="card">
<div class="card-header">
<div>
<h4 class="card-header-title">
Card header title
</h4>
<p class="card-header-subtitle">Card header subtitle <a href="#">Link</a></p>
</div>
<div>
<a href="#" class="btn btn-primary btn-sm">
Action
</a>
<a href="#" class="btn btn-white btn-sm">
Action
</a>
</div>
</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Action</a>
</div>
</div>
Example card with table
<div class="card">
<div class="card-header">
<div>
<h4 class="card-header-title">
Card header title
</h4>
</div>
<div>
<a href="#" class="btn btn-primary btn-sm">
Action
</a>
<a href="#" class="btn btn-white btn-sm">
Action
</a>
</div>
</div>
<div class="table-responsive">
<table class="table card-table table-sm ">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Action</a>
</div>
</div>
Example card with search header
<div class="card">
<div class="card-header">
<div class="row align-items-center">
<div class="col-auto pe-0">
<i class="ti ti-search text-muted"></i>
</div>
<div class="col px-2">
<form>
<input type="search" class="form-control form-control-flush search" placeholder="Search by order number...">
</form>
</div>
<div class="col-auto">
<a href="#" class="btn btn-primary btn-sm">
Action
</a>
<a href="#" class="btn btn-white btn-sm">
Action
</a>
</div>
</div>
</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Action</a>
</div>
</div>