Classic Order Pricing Card Templates

<div class="container-fluid">
      <div class="row min-vh-100 align-items-center">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <div class="card border rounded text-center my-3">
            <span
              class="text-white px-3 mx-auto rounded-bottom w-50 package-type"
              >Starter</span
            >
            <div class="w-100 mb-3 mt-4">
              <span class="h1 price">$3</span>
              <span class="m-0 h6 text-secondary per-month">/per month</span>
            </div>
            <p class="text-secondary mt-3">Upto 5 users</p>
            <p class="text-secondary">Basic support on Github</p>
            <p class="text-secondary">Monthly updates</p>
            <p class="text-secondary m-0">Free cancelation</p>
            <a
              href="#"
              class="btn btn-outline-secondary my-4 mx-auto w-50 custom-btn"
              >Order now</a
            >
          </div>
        </div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <div class="card border rounded text-center my-3 active">
            <span
              class="text-white px-3 mx-auto rounded-bottom w-50 package-type"
              >Professional</span
            >
            <div class="pricing w-100 mb-3 mt-4">
              <span class="h1 price">$6</span>
              <span class="m-0 h6 text-secondary per-month">/per month</span>
            </div>
            <p class="text-secondary mt-3">Upto 10 users</p>
            <p class="text-secondary">Advanced support on Github</p>
            <p class="text-secondary">Monthly updates</p>
            <p class="text-secondary m-0">Free cancelation</p>
            <a
              href="#"
              class="btn btn-outline-secondary my-4 mx-auto w-50 custom-btn"
              >Order Now</a
            >
          </div>
        </div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <div class="card border rounded text-center my-3">
            <span
              class="text-white px-3 mx-auto rounded-bottom w-50 package-type"
              >Business</span
            >
            <div class="pricing w-100 mb-3 mt-4">
              <span class="h1 price">$9</span>
              <span class="m-0 h6 text-secondary per-month">/per month</span>
            </div>
            <p class="text-secondary mt-3">Upto 25 users</p>
            <p class="text-secondary">Premium support on Github</p>
            <p class="text-secondary">Monthly updates</p>
            <p class="text-secondary m-0">Free cancelation</p>
            <a
              href="#"
              class="btn btn-outline-secondary my-4 mx-auto w-50 custom-btn"
              >Order now</a
            >
          </div>
        </div>

<div class="col-12 col-sm-6 col-md-4 col-lg-3">
          <div class="card border rounded text-center my-3">
            <span
              class="text-white px-3 mx-auto rounded-bottom w-50 package-type"
              >Enterprise</span
            >
            <div class="pricing w-100 mb-3 mt-4">
              <span class="h1 price">$12</span>
              <span class="m-0 h6 text-secondary per-month">/per month</span>
            </div>
            <p class="text-secondary mt-3">Upto 50 users</p>
            <p class="text-secondary">Full support on Github</p>
            <p class="text-secondary">Monthly updates</p>
            <p class="text-secondary m-0">Free cancelation</p>
            <a
              href="#"
              class="btn btn-outline-secondary my-4 mx-auto w-50 custom-btn"
              >Order now</a
            >
          </div>
        </div>
      </div>
    </div>
    
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

if (cards) {
          cards.forEach(function (card, card_index) {
            card.addEventListener("click", function () {
              card.classList.toggle("active");

cards.forEach(function (otherCard, otherCard_index) {
                if (card_index !== otherCard_index) {
                  otherCard.classList.remove("active");
                }
              });
            });
          });
        }
      });
    </script>

.card {
        min-width: 15rem;
        max-width: 20rem;
        margin: auto;
        cursor: pointer;
      }

      .card .package-type {
        background-color: #9d37fb;
        transition: 0.5s ease;
      }

      .card .price {
        color: #9d37fb;
      }

      .card.active {
        border: 2px solid #9d37fb !important;
      }

      .card.active .package-type {
        width: 70% !important;
        transition: 0.5s ease;
      }

      .card.active .price {
        color: #000 !important;
      }

      .card.active .per-month {
        color: #000 !important;
      }

      .card.active p {
        color: #000 !important;
      }

      .card.active .custom-btn {
        color: #fff !important;
        background-color: #9d37fb !important;
        border: 1px solid #9d37fb !important;
      }

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css

Copy CDN

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js

Copy CDN

BootStrap 5

Order Card

AdBlock Detected!