Bootstrap 5 Pricing Cards

Toggleable Bootstrap 5 Pricing Table with modern and clean design

by adminkit

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<div id="js-pricing" class="pricing monthly py-5 bg-light">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 text-center">
        <h1 class="h5 my-2 text-uppercase text-muted">Pricing</h1>
        <h1 class="h2 my-3">Choose the plan that’s right for your team</h1>
        <p class="lead">Pay by month or the year, and cancel at any time.</p>
        <div class="d-flex align-items-center justify-content-center">
          <span class="text-uppercase">Monthly</span>

          <div class="form-check form-switch ms-2">
            <input class="form-check-input" type="checkbox" id="js-toggle">
          </div>

          <span class="text-uppercase">Yearly</span>
        </div>
      </div>
    </div>
    <div class="row mt-5">
      <div class="col-lg-3 col-md-6">
        <div class="card text-center shadow-sm mb-4">
          <div class="card-body font-14">
            <h3 class="h4 my-2">Free trial</h3>
            <h6 class="lead">Explore our product</h6>
            <div class="my-3">
              <sup>$</sup>
              <span class="monthly-price fw-bold h2">0</span>
              <span class="yearly-price fw-bold h2">0</span>
              <small class="monthly-price">/mo</small>
              <small class="yearly-price">/yr</small>
            </div>
            <ul class="list-unstyled my-4">
              <li class="my-3"><i class="fas fa-check text-success"></i> 1 developer allowed</li>
              <li class="my-3"><i class="fas fa-check text-success"></i> 1 product</li>
              <li class="my-3"><i class="fas fa-check text-success"></i> Basic support</li>
              <li class="my-3"><i class="fas fa-check text-success"></i> 10 MB of storage</li>
            </ul>
            <div...

CSS

.pricing .monthly-price,
.pricing .yearly-price {
  display: none;
}

.pricing.monthly .monthly-price {
  display: inline;
}

.pricing.yearly .yearly-price {
  display: inline;
}

.pricing .card {
  border-top: 3px solid transparent;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.pricing .card.highlighted {
  border-color: #28a745;
}

.btn-primary {
  background-color: #1e88e5;
  border-color: #1e88e5;
}

.btn-outline-primary {
  color: #1e88e5;
  border-color: #1e88e5;
}

.btn-success {
  background-color: #28a745;
  border-color: #28a745;
}

.btn-link {
  text-decoration: none;
}

JavaScript

document.getElementById("js-toggle").addEventListener("click", function(){
    document.getElementById("js-pricing").classList.toggle("monthly");
    document.getElementById("js-pricing").classList.toggle("yearly");
  });