Bootstrap Pricing - Soft UI Design System
Discover 4 Bootstrap Pricing available in Soft UI Design System
Pricing 3
Pricing 2
Pricing 1
<section class="py-4 bg-gray-100 draggable">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 mx-auto mb-4 text-center">
<h3>Pick the best plan for you</h3>
<p>You have Free Unlimited Updates and Premium Support on each package.</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card card-pricing">
<div class="card-header bg-gradient-dark text-center pt-4 pb-5 position-relative">
<div class="z-index-1 position-relative">
<h5 class="text-white">Freelancer</h5>
<h1 class="text-white mt-2 mb-0">
<small>$</small><span>199</span></h1>
<h6 class="text-white">per year</h6>
</div>
</div>
<div class="position-relative mt-n5" style="height: 50px;">
<div class="position-absolute w-100">
<svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="moving-waves">
<use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
<use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
<use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
<use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
<use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
<use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
</g>
</svg>
</div>
</div>
<div class="card-body text-center">
<ul class="list-unstyled max-width-200 mx-auto">
<li>
<b>10</b> Projects
<hr class="horizontal dark">
</li>
<li>
<b>1</b> Team Members
<hr class="horizontal dark">
</li>
<li>
<b>5</b> Personal Contacts
<hr class="horizontal dark">
</li>
<li>
<b>500</b> Messages
</li>
</ul>
<a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0">
Get started
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-5 mt-sm-0 ">
<div class="card card-pricing">
<div class="card-header text-center pt-4 pb-5 position-relative" style="background-image: url('https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/curved-images/curved6-small.jpg');background-size: cover;">
<span class="mask bg-gradient-dark opacity-4 border-radius-lg"></span>
<div class="z-index-1 position-relative">
<h5 class="text-white">Startup</h5>
<h1 class="text-white mt-2 mb-0">
<small>$</small><span>349</span></h1>
<h6 class="text-white">per year</h6>
</div>
</div>
<div class="position-relative mt-n5" style="height: 50px;">
<div class="position-absolute w-100">
<svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="moving-waves">
<use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
<use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
<use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
<use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
<use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
<use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
</g>
</svg>
</div>
</div>
<div class="card-body text-center">
<ul class="list-unstyled max-width-200 mx-auto">
<li>
<b>10</b> Projects
<hr class="horizontal dark">
</li>
<li>
<b>1</b> Team Members
<hr class="horizontal dark">
</li>
<li>
<b>5</b> Personal Contacts
<hr class="horizontal dark">
</li>
<li>
<b>500</b> Messages
</li>
</ul>
<a href="javascript:;" class="btn bg-gradient-primary w-100 mt-4 mb-0">
Get started
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-5 mt-lg-0 mx-md-auto">
<div class="card card-pricing">
<div class="card-header bg-gradient-dark text-center pt-4 pb-5 position-relative">
<div class="z-index-1 position-relative">
<h5 class="text-white">Company</h5>
<h1 class="text-white mt-2 mb-0">
<small>$</small><span>779</span></h1>
<h6 class="text-white">per year</h6>
</div>
</div>
<div class="position-relative mt-n5" style="height: 50px;">
<div class="position-absolute w-100">
<svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="moving-waves">
<use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
<use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
<use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
<use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
<use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
<use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
</g>
</svg>
</div>
</div>
<div class="card-body text-center">
<ul class="list-unstyled max-width-200 mx-auto">
<li>
<b>10</b> Projects
<hr class="horizontal dark">
</li>
<li>
<b>1</b> Team Members
<hr class="horizontal dark">
</li>
<li>
<b>5</b> Personal Contacts
<hr class="horizontal dark">
</li>
<li>
<b>500</b> Messages
</li>
</ul>
<a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0">
Get started
</a>
</div>
</div>
</div>
</div>
</div>
</section><section class="py-4 bg-gray-100 draggable">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 mx-auto mb-4 text-center">
<h3>Pick the best plan for you</h3>
<p>You have Free Unlimited Updates and Premium Support on each package.</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card card-pricing">
<div class="card-header bg-gradient-dark text-center pt-4 pb-5 position-relative">
<div class="z-index-1 position-relative">
<h5 class="text-white">Freelancer</h5>
<h1 class="text-white mt-2 mb-0">
<small>$</small><span>199</span></h1>
<h6 class="text-white">per year</h6>
</div>
</div>
<div class="position-relative mt-n5" style="height: 50px;">
<div class="position-absolute w-100">
<svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="moving-waves">
<use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
<use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
<use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
<use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
<use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
<use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
</g>
</svg>
</div>
</div>
<div class="card-body text-center">
<ul class="list-unstyled max-width-200 mx-auto">
<li>
<b>10</b> Projects
<hr class="horizontal dark">
</li>
<li>
<b>1</b> Team Members
<hr class="horizontal dark">
</li>
<li>
<b>5</b> Personal Contacts
<hr class="horizontal dark">
</li>
<li>
<b>500</b> Messages
</li>
</ul>
<a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0">
Get started
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-5 mt-sm-0 ">
<div class="card card-pricing">
<div class="card-header text-center pt-4 pb-5 position-relative" style="background-image: url('https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/curved-images/curved6-small.jpg');background-size: cover;">
<span class="mask bg-gradient-dark opacity-4 border-radius-lg"></span>
<div class="z-index-1 position-relative">
<h5 class="text-white">Startup</h5>
<h1 class="text-white mt-2 mb-0">
<small>$</small><span>349</span></h1>
<h6 class="text-white">per year</h6>
</div>
</div>
<div class="position-relative mt-n5" style="height: 50px;">
<div class="position-absolute w-100">
<svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="moving-waves">
<use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
<use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
<use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
<use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
<use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
<use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
</g>
</svg>
</div>
</div>
<div class="card-body text-center">
<ul class="list-unstyled max-width-200 mx-auto">
<li>
<b>10</b> Projects
<hr class="horizontal dark">
</li>
<li>
<b>1</b> Team Members
<hr class="horizontal dark">
</li>
<li>
<b>5</b> Personal Contacts
<hr class="horizontal dark">
</li>
<li>
<b>500</b> Messages
</li>
</ul>
<a href="javascript:;" class="btn bg-gradient-primary w-100 mt-4 mb-0">
Get started
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-5 mt-lg-0 mx-md-auto">
<div class="card card-pricing">
<div class="card-header bg-gradient-dark text-center pt-4 pb-5 position-relative">
<div class="z-index-1 position-relative">
<h5 class="text-white">Company</h5>
<h1 class="text-white mt-2 mb-0">
<small>$</small><span>779</span></h1>
<h6 class="text-white">per year</h6>
</div>
</div>
<div class="position-relative mt-n5" style="height: 50px;">
<div class="position-absolute w-100">
<svg class="waves waves-sm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="card-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="moving-waves">
<use xlink:href="#card-wave" x="48" y="-1" fill="rgba(255,255,255,0.30"></use>
<use xlink:href="#card-wave" x="48" y="3" fill="rgba(255,255,255,0.35)"></use>
<use xlink:href="#card-wave" x="48" y="5" fill="rgba(255,255,255,0.25)"></use>
<use xlink:href="#card-wave" x="48" y="8" fill="rgba(255,255,255,0.20)"></use>
<use xlink:href="#card-wave" x="48" y="13" fill="rgba(255,255,255,0.15)"></use>
<use xlink:href="#card-wave" x="48" y="16" fill="rgba(255,255,255,0.99)"></use>
</g>
</svg>
</div>
</div>
<div class="card-body text-center">
<ul class="list-unstyled max-width-200 mx-auto">
<li>
<b>10</b> Projects
<hr class="horizontal dark">
</li>
<li>
<b>1</b> Team Members
<hr class="horizontal dark">
</li>
<li>
<b>5</b> Personal Contacts
<hr class="horizontal dark">
</li>
<li>
<b>500</b> Messages
</li>
</ul>
<a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0">
Get started
</a>
</div>
</div>
</div>
</div>
</div>
</section>