Bootstrap Pricing 3 Section

How to use this Bootstrap snippet

Our Pricing

We offer simple, reasonable, and diaphanous pricing plans.

Starter

Scale as you go from

$45

USD / Month

Choose Plan
  • 5 Bootstrap Install
  • 100,000 Visits
  • 30 GB Disk Space
  • Free SSL and CDN
  • Free Support
  • Weekly Reports
Most Popular

Pro

30-day money back gurantee

$75

USD / Month

Choose Plan
  • 20 Bootstrap Install
  • 250,000 Visits
  • 50 GB Disk Space
  • Free SSL and CDN
  • Free Support
  • Weekly Reports

Business

Free trial is available

$125

USD / Month

Choose Plan
  • 50 Bootstrap Install
  • 400,000 Visits
  • 100 GB Disk Space
  • Free SSL and CDN
  • Free Support
  • Weekly Reports

How to use this Bootstrap Pricing 3 Section

Place the code in the <body> for Interface 
          
<!-- Pricing 3 - Bootstrap Brain Component -->
<section class="bsb-pricing-3 py-5 py-xl-8">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-10 col-lg-8 col-xl-7">
        <h3 class="fs-5 mb-2 text-secondary text-center text-uppercase">Our Pricing</h3>
        <h2 class="display-5 mb-5 mb-xl-9 text-center">We offer simple, reasonable, and diaphanous pricing plans.</h2>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="container-fluid bg-light border pb-4 mt-md-6 shadow">
          <div class="row">
            <div class="col-12 col-md-4">
              <div class="card border-0 bg-transparent">
                <div class="card-body p-4 p-xxl-5">
                  <h2 class="h4 mb-2">Starter</h2>
                  <p class="text-secondary m-0">Scale as you go from</p>
                  <hr class="my-4 border-dark-subtle">
                  <h4 class="display-3 fw-bold text-primary m-0">$45</h4>
                  <p class="text-secondary m-0">USD / Month</p>
                  <div class="d-grid gap-2 my-4">
                    <a href="#!" class="btn btn-lg btn-outline-primary">Choose Plan</a>
                  </div>
                  <ul class="list-group list-group-flush m-0">
                    <li class="list-group-item bg-transparent">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span><strong>5</strong> Bootstrap Install</span>
                    </li>
                    <li class="list-group-item bg-transparent">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span><strong>100,000</strong> Visits</span>
                    </li>
                    <li class="list-group-item bg-transparent">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span><strong>30 GB</strong> Disk Space</span>
                    </li>
                    <li class="list-group-item bg-transparent">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x text-danger" viewBox="0 0 16 16">
                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                      </svg>
                      <span>Free <strong>SSL and CDN</strong></span>
                    </li>
                    <li class="list-group-item bg-transparent">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x text-danger" viewBox="0 0 16 16">
                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                      </svg>
                      <span>Free <strong>Support</strong></span>
                    </li>
                    <li class="list-group-item bg-transparent">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x text-danger" viewBox="0 0 16 16">
                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                      </svg>
                      <span><strong>Weekly</strong> Reports</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-4">
              <div class="card bg-white border-0 border-top pt-md-6 shadow-sm bsb-pricing-popular">
                <div class="card-body position-relative p-4 p-xxl-5">
                  <span class="badge text-bg-warning position-absolute top-0 start-50 translate-middle">Most Popular</span>
                  <h2 class="h4 mb-2">Pro</h2>
                  <p class="text-secondary m-0">30-day money back gurantee</p>
                  <hr class="my-4 border-dark-subtle">
                  <h4 class="display-3 fw-bold text-primary m-0">$75</h4>
                  <p class="text-secondary m-0">USD / Month</p>
                  <div class="d-grid gap-2 my-4">
                    <a href="#!" class="btn btn-lg btn-primary">Choose Plan</a>
                  </div>
                  <ul class="list-group list-group-flush m-0">
                    <li class="list-group-item">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span><strong>20</strong> Bootstrap Install</span>
                    </li>
                    <li class="list-group-item">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span><strong>250,000</strong> Visits</span>
                    </li>
                    <li class="list-group-item">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span><strong>50 GB</strong> Disk Space</span>
                    </li>
                    <li class="list-group-item">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span>Free <strong>SSL and CDN</strong></span>
                    </li>
                    <li class="list-group-item">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span>Free <strong>Support</strong></span>
                    </li>
                    <li class="list-group-item">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x text-danger" viewBox="0 0 16 16">
                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                      </svg>
                      <span><strong>Weekly</strong> Reports</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-4">
              <div class="card border-0 bg-transparent">
                <div class="card-body p-4 p-xxl-5">
                  <h2 class="h4 mb-2">Business</h2>
                  <p class="text-secondary m-0">Free trial is available</p>
                  <hr class="my-4 border-dark-subtle">
                  <h4 class="display-3 fw-bold text-primary m-0">$125</h4>
                  <p class="text-secondary m-0">USD / Month</p>
                  <div class="d-grid gap-2 my-4">
                    <a href="#!" class="btn btn-lg btn-outline-primary">Choose Plan</a>
                  </div>
                  <ul class="list-group list-group-flush m-0">
                    <li class="list-group-item bg-transparent">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span><strong>50</strong> Bootstrap Install</span>
                    </li>
                    <li class="list-group-item bg-transparent">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span><strong>400,000</strong> Visits</span>
                    </li>
                    <li class="list-group-item bg-transparent">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span><strong>100 GB</strong> Disk Space</span>
                    </li>
                    <li class="list-group-item bg-transparent">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span>Free <strong>SSL and CDN</strong></span>
                    </li>
                    <li class="list-group-item bg-transparent">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span>Free <strong>Support</strong></span>
                    </li>
                    <li class="list-group-item bg-transparent">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                        <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
                      </svg>
                      <span><strong>Weekly</strong> Reports</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/pricings/pricing-3/assets/css/pricing-3.css">

This free Bootstrap Pricing Table example has a contemporary, minimal, and sleek layout. This Bootstrap Pricing Table uses HTML, CSS, and Bootstrap 5. This free Bootstrap 5 snippet has a responsive design that will look great on all screens. This Bootstrap Pricing Table has a three-column layout. It also features a most popular plan with an eye-catching design. This Bootstrap 5 snippet is very easy to implement in the Bootstrap website templates.