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.

Card header with Actions

Card header subtitle Link

Example Action

Card title

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.

Action

Card Header with .card-header-widgets

Example Action
Active Vistors
57
Unique Visitors
3,245
87.2%
Carts Created
3,245
17.2%
Sales
$12,245
23.2%
Conversion Rate
80.5%
3.2%
AOV
$122.23
3.2%
Status: Open Payment Status: Pending Fulfillment Status: Unfulfilled, On Hold
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Results 39

Example card with table

Card header title

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Action 
<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

Action Action

Card title

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.

Action 
<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>