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.

Basic

Combination of the card component, styled lists and other components.

Basic

$19 / month
  • 1 free domain
  • Storage space: 5GB
  • 100k monthly visitors
  • One-click staging site
  • Search engine wizard
  • Community support
                                                        
<!-- Pricing Card -->
<div class="pricing-card">
    <div class="card shadow-soft border-light text-center mt-1">
        <!-- Header -->
        <header class="card-header bg-white p-3">
            <h2 class="h5 text-primary mb-4">Basic</h2>
            <span class="d-block">
            <span class="display-1 text-dark font-weight-bold">
                <span class="align-top font-medium">$</span>19
            </span>
            <span class="d-block text-gray font-small">/ month</span>
            </span>
        </header>
        <!-- End Header -->
        <!-- Content -->
        <div class="card-body">
            <ul class="list-group mb-4">
            <li class="list-group-item"><strong>1</strong> free domain</li>
            <li class="list-group-item">Storage space: <strong>5GB</strong></li>
            <li class="list-group-item"><strong>100k</strong> monthly visitors</li>
            <li class="list-group-item">One-click staging site</li>
            <li class="list-group-item">Search engine wizard </li>
            <li class="list-group-item">Community support</li>
            </ul>
            <button type="button" class="btn btn-primary btn-block" tabindex="0">Start Starter</button>
        </div>
        <!-- End Content -->
    </div>
</div>
<!-- End of Pricing Card -->
Basic 2
$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-gray 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 -->