Bootstrap 5

Bootstrap 5 Pricing Card

A Pricing Card is a Bootstrap 5 card-based component used to present subscription tiers, service packages, or product plans side by side, allowing users to compare features and prices at a glance. It typically combines a card header with a plan name, a prominent price display, a feature list, and a call-to-action button. Use it on landing pages, SaaS dashboards, or any page where you need users to choose between two or more purchasing options.

Primary Class

.pricing-card

Common Use Cases

→A SaaS product displaying Free, Pro, and Enterprise subscription tiers with monthly/annual toggle pricing
→A freelance portfolio site showing three service packages — Basic, Standard, and Premium — with deliverables listed per tier
→A gym or fitness studio website presenting membership plans with class access levels and contract terms
→A web hosting provider comparing Shared, VPS, and Dedicated server plans with storage, bandwidth, and support differences

Variants & Classes

Variant	Description	Classes
Pricing Card Default	Standard pricing card with Bootstrap's default styling.	`pricing-card`
Pricing Card Responsive	Responsive variant that adapts to different screen sizes.	`pricing-card pricing-card-responsive`

Code Example

<div class="row row-cols-1 row-cols-md-3 g-4 justify-content-center">

  <!-- Starter Plan -->
  <div class="col">
    <div class="card h-100 border-0 shadow-sm">
      <div class="card-header bg-white text-center py-4 border-0">
        <h5 class="fw-semibold text-muted text-uppercase ls-1">Starter</h5>
        <div class="display-5 fw-bold mt-2">$9<span class="fs-5 fw-normal text-muted">/mo</span></div>
      </div>
      <div class="card-body">
        <ul class="list-unstyled mb-4">
          <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>1 Website</li>
          <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>10 GB Storage</li>
          <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Email Support</li>
          <li class="mb-2 text-muted"><i class="bi bi-x-circle-fill me-2"></i>Custom Domain</li>
          <li class="mb-2 text-muted"><i class="bi bi-x-circle-fill me-2"></i>Analytics Dashboard</li>
        </ul>
        <div class="d-grid">
          <a href="#" class="btn btn-outline-primary">Get Started</a>
        </div>
      </div>
    </div>
  </div>

  <!-- Pro Plan (Featured) -->
  <div class="col">
    <div class="card h-100 border-primary shadow">
      <div class="card-header bg-primary text-white text-center py-4 border-0">
        <span class="badge bg-warning text-dark mb-2">Most Popular</span>
        <h5 class="fw-semibold text-uppercase">Pro</h5>
        <div class="display-5 fw-bold mt-2">$29<span class="fs-5 fw-normal opacity-75">/mo</span></div>
      </div>
      <div class="card-body">
        <ul class="list-unstyled mb-4">
          <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>10 Websites</li>
          <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>100 GB Storage</li>
          <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Priority Support</li>
          <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Custom Domain</li>
          <li class="mb-2 text-muted"><i class="bi bi-x-circle-fill me-2"></i>Analytics Dashboard</li>
        </ul>
        <div class="d-grid">
          <a href="#" class="btn btn-primary">Start Free Trial</a>
        </div>
      </div>
    </div>
  </div>

  <!-- Business Plan -->
  <div class="col">
    <div class="card h-100 border-0 shadow-sm">
      <div class="card-header bg-white text-center py-4 border-0">
        <h5 class="fw-semibold text-muted text-uppercase">Business</h5>
        <div class="display-5 fw-bold mt-2">$79<span class="fs-5 fw-normal text-muted">/mo</span></div>
      </div>
      <div class="card-body">
        <ul class="list-unstyled mb-4">
          <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Unlimited Websites</li>
          <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>500 GB Storage</li>
          <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>24/7 Phone Support</li>
          <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Custom Domain</li>
          <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>Analytics Dashboard</li>
        </ul>
        <div class="d-grid">
          <a href="#" class="btn btn-outline-primary">Contact Sales</a>
        </div>
      </div>
    </div>
  </div>

</div>

Live Examples

Basic Pricing Card

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated pricing card with custom colours
✓Pricing Card with interactive states
✓Responsive pricing card for all screen sizes

Best Practices

Visually elevate your recommended tier

Apply `border-primary` and a filled `bg-primary` card header to your featured plan, and use a `badge` with a 'Most Popular' label — this anchoring effect consistently drives clicks to the tier you want users to choose.

Use `d-grid` on your CTA button for full-width consistency

Wrapping your action button in a `<div class="d-grid">` ensures the button stretches to the full card width, creating visual alignment across all pricing columns without custom CSS.

Keep feature lists scannable with icon-based unavailability

Display unavailable features in muted grey with an X icon rather than hiding them entirely — users comparing plans need to see what they're missing in lower tiers to justify upgrading.

Use `h-100` on every card inside a row

Adding `h-100` to each `.card` element ensures all cards stretch to equal height regardless of content length, preventing the layout from collapsing unevenly when feature lists vary between tiers.

FAQ

How do I make one pricing card larger or more prominent than the others?

Beyond the border and header colour change, you can use Bootstrap's `transform` utility or a small custom CSS rule like `transform: scale(1.05)` on the featured card. Pair this with `shadow` (versus `shadow-sm` on others) and `z-index: 1` via `position-relative` to ensure it appears physically elevated without breaking the flex layout of the surrounding row.

Can I add a monthly/annual billing toggle to Bootstrap 5 pricing cards?

Bootstrap 5 doesn't ship a toggle-price interaction natively, but you can build it with Bootstrap's own JavaScript and a button group styled as a toggle: use `<div class='btn-group'>` with two buttons, then toggle a CSS class on price elements via a small vanilla JS event listener that swaps `data-monthly` and `data-annual` attribute values into the displayed price span. No third-party libraries required.

How does Canvas Builder generate pricing card sections?

Canvas Builder reads your prompt — for example, 'three-tier SaaS pricing with a highlighted Pro plan' — and outputs a fully structured Bootstrap 5 pricing section using your brand's primary colour for the featured card header and CTA button. It applies `h-100`, `shadow`, and responsive `row-cols` classes automatically, and populates realistic placeholder plan names, prices, and feature lists based on your described product type.