Pricing Cards

Quickly build an effective pricing table for your potential customers with this examples. Our cards are built with default Bootstrap components and utilities with some customizations.

Example
$19 / month

Faster sites deliver better business results for your clients.

  • Full Support No
  • Storage 50 GB
  • Monthly Visitors 400k
                                                        
<!-- Pricing Card -->
<div class="pricing-card">
    <div class="card shadow-soft border-light p-4">
        <!-- Header -->
        <header class="card-header border-bottom bg-white text-center">
            <span class="d-block">
                <span class="display-1 text-secondary font-weight-bold">
                    <span class="align-top font-medium">$</span>19
                </span>
                <span class="text-light font-small">/ month</span>
            </span>
        </header>
        <!-- End Header -->
        <!-- Content -->
        <div class="card-body">
            <p>Faster sites deliver better business results for
                your clients.</p>
            <ul class="list-group mb-4">
                <li class="list-group-item"><strong>Full Support</strong>
                    No</li>
                <li class="list-group-item"><strong>Storage</strong>
                    50 GB</li>
                <li class="list-group-item"><strong>Monthly
                        Visitors</strong> 400k</li>
            </ul>
            <button type="button" class="btn btn-outline-secondary btn-block"
                tabindex="0"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button>
        </div>
        <!-- End Content -->
    </div>
</div>
<!-- End of Pricing Card -->