Bootstrap Pricing - Soft UI Design System
Discover 4 Bootstrap Pricing available in Soft UI Design System
Requires JavaScript
Pricing 1
Component from
Soft UI Design System
Builder
<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>
<script>
var total = document.querySelectorAll('.nav-pills'); total.forEach(function(item, i){ var moving_div = document.createElement('div'); var first_li = item.querySelector('li .nav-link.active'); var tab = first_li.cloneNode(); tab.innerHTML = "-"; moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link'); moving_div.appendChild(tab); item.appendChild(moving_div); var list_length = item.getElementsByTagName("li").length; let nodes = Array.from( first_li.closest('ul').children ) let index = nodes.indexOf( first_li.closest('li') )+1; let sum = 0; moving_div.style.padding = '0px'; moving_div.style.width = item.querySelector('li .nav-link.active').offsetWidth+'px'; if(item.classList.contains('flex-column')){ for(var j = 1; j<index; j++){ sum += item.querySelector('li:nth-child('+j+')').offsetHeight; } moving_div.style.transform = 'translate3d(0px,'+sum+'px, 0px)'; } else { for(var j = 1; j<index; j++){ sum += item.querySelector('li:nth-child('+j+')').offsetWidth; } moving_div.style.transform = 'translate3d('+sum+'px, 0px, 0px)'; } moving_div.style.transition = '.5s ease'; item.onmouseover = function(event) { let target = getEventTarget(event); let li = target.closest('li'); // get reference if(li){ let nodes = Array.from( li.closest('ul').children ); // get array let index = nodes.indexOf( li )+1; item.querySelector('li:nth-child('+index+') .nav-link').onclick = function(){ moving_div = item.querySelector('.moving-tab'); let sum = 0; if(item.classList.contains('flex-column')){ for(var j = 1; j<=nodes.indexOf( li ); j++){ sum += item.querySelector('li:nth-child('+j+')').offsetHeight; } moving_div.style.transform = 'translate3d(0px,'+sum+'px, 0px)'; moving_div.style.height = item.querySelector('li:nth-child('+j+')').offsetHeight; } else { for(var j = 1; j<=nodes.indexOf( li ); j++){ sum += item.querySelector('li:nth-child('+j+')').offsetWidth; } moving_div.style.transform = 'translate3d('+sum+'px, 0px, 0px)'; moving_div.style.width = item.querySelector('li:nth-child('+index+')').offsetWidth+'px'; } } } } });
</script>
Pricing 3
Pricing 2
Requires JavaScript
