Bootstrap Pricing Table Example

Three pricing plans in cards. They are stacked on a phone and in one row on a medium or bigger screen, with the same height.

<div class="container py-3">
  <div class="row row-cols-1 row-cols-md-3 g-3 text-center">
    <div class="col">
      <div class="card h-100 rounded-3 shadow-sm">
        <div class="card-header py-3"><h2 class="h4 my-0 fw-normal">Free</h2></div>
        <div class="card-body d-flex flex-column">
          <h3 class="display-6">$0<small class="text-body-secondary fw-light fs-5">/mo</small></h3>
          <ul class="list-unstyled mt-3 mb-4">
            <li>1 project</li><li>2 GB storage</li><li>Community support</li>
          </ul>
          <button type="button" class="btn btn-lg btn-outline-primary mt-auto">Sign up for free</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 rounded-3 shadow border-primary">
        <div class="card-header py-3 text-bg-primary border-primary"><h2 class="h4 my-0 fw-normal">Pro <span class="badge text-bg-light">Popular</span></h2></div>
        <div class="card-body d-flex flex-column">
          <h3 class="display-6">$15<small class="text-body-secondary fw-light fs-5">/mo</small></h3>
          <ul class="list-unstyled mt-3 mb-4">
            <li>20 projects</li><li>10 GB storage</li><li>Email support</li>
          </ul>
          <button type="button" class="btn btn-lg btn-primary mt-auto">Get started</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 rounded-3 shadow-sm">
        <div class="card-header py-3"><h2 class="h4 my-0 fw-normal">Business</h2></div>
        <div class="card-body d-flex flex-column">
          <h3 class="display-6">$49<small class="text-body-secondary fw-light fs-5">/mo</small></h3>
          <ul class="list-unstyled mt-3 mb-4">
            <li>Unlimited projects</li><li>100 GB storage</li><li>Phone and email support</li>
          </ul>
          <button type="button" class="btn btn-lg btn-outline-primary mt-auto">Contact us</button>
        </div>
      </div>
    </div>
  </div>
</div>

The preview window is narrow, so the plans are stacked. On a medium or wide screen they are side by side.

How it works

• row-cols-1 row-cols-md-3 makes one card per row on phones and three per row from 768px.
• h-100 on the cards and d-flex flex-column with mt-auto on the button keeps all the buttons at the bottom, even when the lists have different lengths.
• The popular plan is highlighted with a colored header (text-bg-primary), a border and a bigger shadow.

• Previous Code
• Next Code

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.