Bootstrap 5 Pricing Table
A pricing table displays product or service tiers side-by-side, allowing visitors to compare plans and make a purchase decision. In Bootstrap 5, pricing tables are typically built using the card component, the grid system, and utility classes for differentiation between tiers.
Primary Class
.card (base component)Common Use Cases
- →SaaS pricing plans
- →Service tier comparison
- →Product variant selection
- →Subscription plan display
- →Agency service packages
Variants & Classes
| Variant | Description |
|---|---|
| Three-tier card layout | Three cards side by side, middle tier highlighted as recommended. |
| Feature comparison table | Tabular format with features as rows and plans as columns. |
| Two-tier horizontal | Two large side-by-side cards with generous padding. |
| Dark featured tier | Middle tier uses bg-dark text-white to stand out visually. |
Code Example
<div class="row row-cols-1 row-cols-md-3 g-4 align-items-stretch">
<div class="col">
<div class="card h-100 border-0 shadow-sm p-4">
<div class="card-body">
<h5 class="card-title fw-bold">Starter</h5>
<div class="display-6 fw-bold my-3">$9<small class="fs-6 text-muted">/mo</small></div>
<ul class="list-unstyled mb-4">
<li class="mb-2">✓ 50 credits</li>
<li class="mb-2">✓ Full page generation</li>
<li class="mb-2 text-muted">✗ Priority support</li>
</ul>
<a href="/signup" class="btn btn-outline-dark w-100">Get Started</a>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 border-0 bg-dark text-white p-4 shadow">
<div class="card-body">
<span class="badge bg-primary mb-2">Most Popular</span>
<h5 class="card-title fw-bold">Pro</h5>
<div class="display-6 fw-bold my-3">$29<small class="fs-6 opacity-75">/mo</small></div>
<ul class="list-unstyled mb-4">
<li class="mb-2">✓ 200 credits</li>
<li class="mb-2">✓ Full page generation</li>
<li class="mb-2">✓ Priority support</li>
</ul>
<a href="/signup" class="btn btn-primary w-100">Get Pro</a>
</div>
</div>
</div>
</div>Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Three-tier with feature checklist rows
- ✓Annual/monthly toggle with JavaScript
- ✓Enterprise-focused two-tier layout
- ✓Pricing with custom icon per tier
- ✓Full-width single featured plan
Best Practices
Always highlight the recommended plan
Visual differentiation on the middle/recommended tier — a border, shadow, or dark background — increases selection of that tier by 20–30% in most A/B tests. Don't leave all plans visually equal.
Show price per month even for annual plans
Display monthly equivalent pricing for annual plans ('$19/month, billed annually'). People process monthly amounts more easily than annual totals.
Place the pricing section near the bottom of the page
Pricing converts better after you've established value. Lead with benefits, social proof, and features — then present pricing once the visitor is already convinced of the product's worth.