Canvas HTML Template component library, others built from scratch — each solving a specific conversion problem you will actually face.
Key Takeaways
- Pricing table layout, visual hierarchy, and CTA placement have a measurable impact on plan selection and conversion rate.
- Bootstrap 5’s grid, utility classes, and CSS custom properties make it straightforward to build accessible, responsive pricing tables without third-party UI libraries.
- A recommended (“popular”) plan, a toggle for billing period, and a clear feature comparison matrix are the three most consistently effective conversion elements.
- Every design below includes a working HTML structure you can drop into any Bootstrap 5 project or pricing page HTML file today.
- Canvas ships pre-built pricing blocks in multiple visual styles, saving agencies hours of per-client design work.
Why Pricing Table Layout Drives (or Kills) Revenue
Pricing pages convert between 1% and 5% of visitors on average, but layout changes alone have been documented shifting that figure by 30% or more in A/B tests. Three cognitive factors are at work: anchoring (the first price seen sets expectations), the decoy effect (a mid-tier plan makes the highest tier look reasonable), and decision fatigue (too many options cause visitors to choose nothing). Every design pattern below addresses at least one of these factors directly.
If your project also involves a CMS-driven backend, the WordPress REST API with a static HTML front-end approach lets you store plan data in WordPress and render it into any of these Bootstrap pricing examples without rebuilding the page.
1–3: The Three-Column Layout with a Highlighted Plan
The most proven pricing table pattern is three columns with the recommended plan visually elevated — a raised card, a badge, a contrasting background colour, or a combination of all three.
<!-- Bootstrap 5 three-column pricing table -->
<div class="row row-cols-1 row-cols-md-3 g-4 align-items-stretch">
<!-- Plan 1: Starter -->
<div class="col">
<div class="card h-100 border text-center p-4">
<h3 class="h5 mb-1">Starter</h3>
<p class="display-5 fw-bold my-3">$9<span class="fs-6 fw-normal">/mo</span></p>
<ul class="list-unstyled mb-4 text-start">
<li class="mb-2">✓ 1 user</li>
<li class="mb-2">✓ 5 GB storage</li>
<li class="mb-2 text-muted">✗ Priority support</li>
</ul>
<a href="#" class="btn btn-outline-primary mt-auto">Get started</a>
</div>
</div>
<!-- Plan 2: Pro (recommended) -->
<div class="col">
<div class="card h-100 border-0 shadow-lg text-center p-4 text-white"
style="background-color: var(--cnvs-themecolor);">
<span class="badge bg-white text-dark mb-2">Most Popular</span>
<h3 class="h5 mb-1">Pro</h3>
<p class="display-5 fw-bold my-3">$29<span class="fs-6 fw-normal">/mo</span></p>
<ul class="list-unstyled mb-4 text-start">
<li class="mb-2">✓ 10 users</li>
<li class="mb-2">✓ 50 GB storage</li>
<li class="mb-2">✓ Priority support</li>
</ul>
<a href="#" class="btn btn-light mt-auto">Get started</a>
</div>
</div>
<!-- Plan 3: Enterprise -->
<div class="col">
<div class="card h-100 border text-center p-4">
<h3 class="h5 mb-1">Enterprise</h3>
<p class="display-5 fw-bold my-3">$79<span class="fs-6 fw-normal">/mo</span></p>
<ul class="list-unstyled mb-4 text-start">
<li class="mb-2">✓ Unlimited users</li>
<li class="mb-2">✓ 500 GB storage</li>
<li class="mb-2">✓ Dedicated support</li>
</ul>
<a href="#" class="btn btn-outline-primary mt-auto">Contact sales</a>
</div>
</div>
</div>
Note the use of var(--cnvs-themecolor) on the featured card. In Canvas, this single variable propagates your brand colour across every component that references it, so a one-line change in your stylesheet repaints the entire pricing section.
Variation 2 raises only the card position with mt-n3 and adds a coloured top border (border-top border-primary border-3) instead of a full background change — more subtle, useful for light themes where a solid colour card feels heavy.
Variation 3 uses a dark background for the entire section (bg-dark text-white) and inverts the featured card to white. This performs well on SaaS product pages where the rest of the page is light.
4–5: Monthly / Annual Toggle
Showing both billing periods on one page reduces the second visit (“let me check if annual is cheaper”) and nudges users towards annual commitment. Bootstrap 5’s form check combined with a small JavaScript price-swap is all you need.
<div class="text-center mb-4">
<div class="form-check form-switch d-inline-flex align-items-center gap-2">
<span>Monthly</span>
<input class="form-check-input fs-5" type="checkbox" id="billingToggle">
<label class="form-check-label" for="billingToggle">
Annual <span class="badge bg-success">Save 20%</span>
</label>
</div>
</div>
<script>
document.getElementById('billingToggle').addEventListener('change', function () {
const monthly = document.querySelectorAll('[data-monthly]');
const annual = document.querySelectorAll('[data-annual]');
monthly.forEach(el => el.classList.toggle('d-none', this.checked));
annual.forEach(el => el.classList.toggle('d-none', !this.checked));
});
</script>
Variation 5 replaces the toggle with a Bootstrap 5 button group (btn-group) acting as a tab selector — more discoverable on mobile where a small checkbox can be missed.
6–7: Full Feature Comparison Table
When your product has more than five distinct features, a comparison grid outperforms a card layout. Use a <table> with class="table table-bordered align-middle", sticky a header row with position: sticky; top: 0;, and use SVG check/cross icons rather than Unicode characters for accessibility.
Variation 7 collapses the table on mobile into an accordion (one plan per <details> panel) so the user can inspect each plan individually without horizontal scrolling — a common pain point that kills mobile conversions.
8–9: Two-Plan and Single-Plan Focused Layouts
Not every product needs three tiers. A freelance tool or a single-service agency often converts better with two plans or even one plan plus a custom-quote option. Two columns sit naturally inside col-md-5 offset-md-1 pairs, giving breathing room on desktop without the layout feeling sparse. If your offering is genuinely one-size-fits-all, a single centred card with a social proof statistic beneath the CTA (“Join 14,000 teams already on Pro”) is the cleanest possible pricing page HTML structure.
10–11: Dark-Mode Cards and Horizontal Icon Rows
Dark-mode pricing tables — bg-dark text-white cards, border-colour highlights, subtle box-shadow glows — have become the default for developer tools, APIs, and infrastructure products. The visual association with terminal UIs signals that the product is technical and serious. Pair a dark card with icon rows (Font Awesome or Bootstrap Icons before each feature line) to add scannability without extra text.
These microinteraction and visual polish patterns are explored further in 11 microinteractions that make HTML templates feel premium — several apply directly to pricing cards (hover lifts, button ripples, badge pulse animations).
12–13: Usage-Based Slider and Freemium Upgrade Nudge
Design 12 is built for usage-based pricing (seats, API calls, page views). A Bootstrap 5 range input (<input type="range">) drives a live price calculation via a JavaScript event listener on the input event. Display the computed monthly cost in a large <output> element and update it on every slider movement. This pattern is particularly effective when the lowest price point is genuinely $0 — it lets cost-sensitive visitors find their own number rather than leaving to search for a cheaper alternative.
Design 13 is the freemium upgrade nudge: a compact banner or inline card shown only to logged-in free-tier users. It does not replace the main pricing page but supplements it. Keep it to one upgrade CTA, one compelling differentiator, and a dismiss option — without a dismiss button, repeated exposure trains users to ignore it.
Both of these designs pair well with a lightweight static build. If you are considering moving away from a heavier CMS to deploy a faster pricing page, the guide on migrating from WordPress to a static Bootstrap 5 site covers the workflow in detail.
Universal Conversion Principles Across All 13 Designs
- One recommended plan per layout. Highlighting two plans creates indecision; highlighting none wastes the decoy effect.
- CTAs must differ by plan. “Get started” on Starter, “Start free trial” on Pro, “Contact sales” on Enterprise — the verb signals the commitment level and reduces anxiety.
- Keep the price the largest text element in the card.
display-5ordisplay-4withfw-boldis the right scale in Bootstrap 5. - Place social proof below, not above, the CTA. A testimonial or user count beneath the button reinforces the decision after intent forms.
- Test with real billing period data. Annual vs monthly revenue impact varies by product category — do not assume annual saves more without validating against your churn data.
- Use
aria-labelon icon-only check/cross columns so screen readers can announce “included” or “not included” meaningfully.
If you need to test these layouts across form elements on the same page — a trial signup sitting below the pricing table — the Bootstrap 5 form designs that improve conversions post covers the field layouts, error states, and inline validation patterns that complement pricing tables directly.
Frequently Asked Questions
Three is the research-backed default for most SaaS and digital products because it activates the decoy effect — the middle option appears the most rational choice. Two plans work well for simple tools where the only axis of differentiation is usage volume. Four or more plans require a full comparison table layout to remain scannable; card-based layouts with four columns become cramped below 1,200 px viewport width even with Bootstrap 5’s responsive grid.
The most effective visual combination is shadow-lg (elevation), a contrasting background via an inline style or a custom class using var(--cnvs-themecolor), and mt-n3 or mt-n4 to physically raise the card above its siblings. Adding a .badge element with “Most Popular” or “Recommended” above the plan name reinforces the signal for users who miss purely visual differentiation.
Cards convert better when you have three or fewer plans and five or fewer features per plan — users can scan vertically within one card and make a decision quickly. A <table>-based comparison grid is more effective when you need to compare more than five features across plans, because it lets users scan horizontally by feature rather than toggling mentally between separate cards. Many production pricing pages combine both: cards at the top for quick plan selection, a comparison table lower on the page for detail-oriented buyers.
Use semantic HTML: plan names in heading elements (h3 within a section with an h2), feature lists as true <ul> elements, and prices in a <p> or <span> with the billing period visible as text rather than tooltip-only. Replace Unicode check and cross characters with SVG icons that carry aria-label="Included" and aria-label="Not included" attributes. If you use a billing toggle, ensure the toggle control has a visible <label> and that price changes are announced via an aria-live="polite" region.
Canvas ships multiple pre-built pricing block styles that are production-ready out of the box — card-based, table-based, dark-mode, and minimal variants are all included across its 50+ demos. You can drop them into a project, swap plan names and prices in the HTML, and adjust the brand colour through --cnvs-themecolor without touching any component-level CSS. Structural customisation (adding a billing toggle, changing the number of columns, inserting a usage slider) requires only standard Bootstrap 5 classes and a small amount of vanilla JavaScript — no framework-specific build tools are needed.
Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.
If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.
Skip the setup — build it free
Spin up a complete Bootstrap 5 site, blog included, with Canvas Builder. No coding, no cost.
Canvas Team
Tutorials and tips for building beautiful Bootstrap 5 websites with the Canvas HTML Template and Canvas Builder.
More from the Canvas Blog