Bootstrap Pricing

Discover 4 Bootstrap Pricing available in Loopple

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

Pricing 4