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.
Bootstrap class
No dedicated Bootstrap class
Common use cases
- SaaS pricing plans
- Service tier comparison
- Product variant selection
- Subscription plan display
- Agency service packages
Variants and classes
| Variant | Description and classes |
|---|---|
| Three-tier card layout | Three cards side by side, middle tier highlighted as recommended.row row-cols-1 row-cols-md-3 g-4 + card + border-primary on the featured tier |
| Feature comparison table | Tabular format with features as rows and plans as columns.table table-bordered text-center |
| Two-tier horizontal | Two large side-by-side cards with generous padding.row row-cols-1 row-cols-lg-2 + card p-4 |
| Dark featured tier | Middle tier uses bg-dark text-white to stand out visually.card text-bg-dark border-0 |
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>Live examples
3-Column Pricing Cards
Standard SaaS pricing grid with Starter, Pro, and Enterprise tiers.
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- 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 to 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.