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-light 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-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 -->
Background
19$ / month
  • Community support
  • 15 GB SSD storage
  • One-click staging site
  • 10 E-mail accounts
  • 2 Bootstrap Themes
                                                        
<!-- Pricing Card -->
<div class="pricing-card">
    <div class="card section-image overlay-dark text-white border-0 p-3" data-background="../../assets/img/pricing/pricing-2.jpg">
        <!-- Header -->
        <header class="card-header p-3">
            <span class="icon mb-4"><i class="far fa-money-bill-alt"></i></span>
            <span class="d-block">
            <span class="display-1 font-weight-bold">
                19<span class="align-baseline font-medium">$</span>
            </span>
            <span class="font-small">/ month</span>
            </span>
        </header>
        <!-- End Header -->
        <!-- Content -->
        <div class="card-body p-2">
            <ul class="list-group mb-4">
                <li class="list-group-item"><i class="far fa-lightbulb"></i>Community support</li>
                <li class="list-group-item"><i class="far fa-hdd"></i>15 GB SSD storage</li>
                <li class="list-group-item"><i class="far fa-paper-plane"></i>One-click staging site</li>
                <li class="list-group-item"><i class="far fa-envelope"></i>10 E-mail accounts</li>
                <li class="list-group-item"><i class="far fa-id-badge"></i>2 Bootstrap Themes</li>
            </ul>   
            <button type="button" class="btn btn-secondary btn-block" tabindex="0">Add to Cart</button>
        </div>
        <!-- End Content -->
    </div>
</div>
<!-- End of Pricing Card -->
Box

Basic

$19
  • Basic support
  • 15 GB SSD storage
  • SSH/SFTP access
  • 5 E-mail accounts
  • 2 Bootstrap Themes
                                                        
<!-- Pricing Card -->
<div class="pricing-card">
    <div class="card shadow-soft border-light">
        <div class="row no-gutters align-items-center">
            <div class="col-sm-5">
                <!-- Header -->
                <header class="card-header text-center">                                    
                    <h2 class="h5 mb-0">Basic</h2>
                    <span class="d-block my-3">
                        <span class="display-2 font-weight-bold"><span class="align-baseline font-medium">$</span>19
                        </span>
                    </span>
                    <button type="button" class="btn btn-sm btn-outline-gray btn-block" tabindex="0">Add to Cart</button>
                </header>
            </div>
            <div class="col-sm-7">
                <!-- Content -->
                <div class="card-body">
                    <ul class="list-group simple-list">
                        <li class="list-group-item"><i class="far fa-lightbulb"></i>Basic support</li>
                        <li class="list-group-item"><i class="far fa-hdd"></i>15 GB SSD storage</li>
                        <li class="list-group-item"><i class="far fa-paper-plane"></i>SSH/SFTP access</li>
                        <li class="list-group-item"><i class="far fa-envelope"></i>5 E-mail accounts</li>
                        <li class="list-group-item"><i class="far fa-id-badge"></i>2 Bootstrap Themes</li>
                    </ul>   
                </div>
                <!-- End Content -->
            </div>
        </div>
    </div>
</div>
<!-- End of Pricing Card -->
Basic 3

Change the border color using utilities built on our theme colors, (e.g. .border-primary, .border-secondary.)

Basic

$19 / month

Our Website Backup automatically backs up your data – every day. And in worst-case scenarios, if disaster strikes, you can restore your data.

Regular

$39 / month

So, get Website Backup and stop worrying about data loss. Get back to doing what you do best – running your business and making money.

Premium

$79 / month

It’s hard to believe anyone would want to harm your website, but they do. Thankfully, our security team is on the job 24/7 to meticulously monitor.

                                                        
<!-- Pricing Card -->
<div class="pricing-card animate-up-2">
    <div class="card shadow border-primary p-0">
        <!-- Header -->
        <header class="card-header bg-white">
            <h2 class="h5 text-primary mb-3">Basic</h2>
            <span class="d-block">
            <span class="display-1 text-primary font-weight-bold">
                <span class="align-top font-medium">$</span>19
            </span>
            <span class="d-block text-light font-small">/ month</span>
            </span>
        </header>
        <!-- End Header -->
        <!-- Content -->
        <div class="card-body p-0">
            <p class="p-3">Our Website Backup automatically backs up your data – every day. And in worst-case scenarios, if disaster strikes, you can restore your data.</p>
            <button type="button" class="btn btn-primary btn-block rounded-0" tabindex="0">Add to Cart</button>
        </div>
        <!-- End Content -->
    </div>
</div>
<!-- End of Pricing Card -->
Background color variation

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

$79
  • Community support
  • 15 GB SSD storage
  • One-click staging site
$79
  • Community support
  • 15 GB SSD storage
  • One-click staging site
$79
  • Community support
  • 15 GB SSD storage
  • One-click staging site 
                                                        
<!-- Pricing Card -->
<div class="pricing-card">
    <div class="card bg-primary text-center text-white p-4">
        <!-- Header -->
        <header class="card-header border-0">
            <div class="pricing-value border-white">
                <span class="display-2 font-weight-bold">
                    <span class="font-medium">$</span>79
                </span>
            </div>
        </header>
        <!-- End Header -->
        <!-- Content -->
        <div class="card-body">
            <ul class="list-group mb-4">
                <li class="list-group-item">Community support</li>
                <li class="list-group-item">15 GB SSD storage</li>
                <li class="list-group-item">One-click staging site</li>
            </ul>
            <button type="button" class="btn btn-white btn-block text-tertiary font-weight-bold" tabindex="0"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button>
        </div>
        <!-- End Content -->
    </div>
</div>
<!-- End of Pricing Card -->