Key Takeaways
- Thirteen distinct Bootstrap 5 pricing table layouts, each suited to a different conversion goal.
- Ready-to-use HTML code snippets built on Bootstrap 5 grid and utility classes.
- Design principles — visual hierarchy, recommended plan highlighting, CTA placement — explained alongside each pattern.
- Tips for integrating these patterns into the Canvas HTML Template, which ships with 50+ pre-built demos including multiple pricing sections.
- Common pricing page mistakes and how to avoid them.
Why Pricing Table Design Directly Affects Conversions
A pricing page carries more decision weight than almost any other page on a commercial website. Visitors arriving there are already interested — your job is to remove friction, communicate value, and guide them toward a specific tier. Visual hierarchy, social proof placement, and a clearly highlighted recommended plan are the three levers that move conversion rates most reliably. Every design below addresses at least two of those levers.
1–3: The Three-Column Classic and Its Variations
The three-column layout remains the industry benchmark because it presents a natural comparison without overwhelming the eye. Bootstrap 5’s grid makes it trivial to implement.
1. Standard Three-Column with a Highlighted Middle Tier
Elevate the recommended plan using a darker background, a shadow-lg utility, and a “Most Popular” badge. The surrounding cards intentionally look quieter so the eye lands on the centre column first.
<div class="row g-4 justify-content-center align-items-start">
<!-- Starter -->
<div class="col-md-4">
<div class="card border text-center p-4 h-100">
<h3 class="fw-bold">Starter</h3>
<p class="display-5 fw-bold">$9<span class="fs-6 fw-normal">/mo</span></p>
<ul class="list-unstyled mb-4">
<li>5 Projects</li>
<li>10 GB Storage</li>
<li>Email Support</li>
</ul>
<a href="#" class="btn btn-outline-dark w-100">Get Started</a>
</div>
</div>
<!-- Pro (highlighted) -->
<div class="col-md-4">
<div class="card border-0 bg-dark text-white text-center p-4 h-100 shadow-lg">
<span class="badge bg-warning text-dark mb-2">Most Popular</span>
<h3 class="fw-bold">Pro</h3>
<p class="display-5 fw-bold">$29<span class="fs-6 fw-normal">/mo</span></p>
<ul class="list-unstyled mb-4">
<li>Unlimited Projects</li>
<li>100 GB Storage</li>
<li>Priority Support</li>
</ul>
<a href="#" class="btn btn-warning w-100">Upgrade Now</a>
</div>
</div>
<!-- Enterprise -->
<div class="col-md-4">
<div class="card border text-center p-4 h-100">
<h3 class="fw-bold">Enterprise</h3>
<p class="display-5 fw-bold">$79<span class="fs-6 fw-normal">/mo</span></p>
<ul class="list-unstyled mb-4">
<li>Custom Projects</li>
<li>1 TB Storage</li>
<li>Dedicated Manager</li>
</ul>
<a href="#" class="btn btn-outline-dark w-100">Contact Sales</a>
</div>
</div>
</div>2. Three-Column with Top Icon Strip
Place a single large icon or illustration above the plan name to add visual breathing room and reinforce what each tier is for (individual, team, enterprise). Use Bootstrap Icons or an SVG sprite — keep icons monochrome so they do not compete with the CTA button colour.
3. Three-Column with Annual / Monthly Toggle
A toggle switch built with Bootstrap’s form-check form-switch component swaps visible price values via a few lines of vanilla JavaScript, letting visitors self-select their billing cycle without navigating away. Store both price values in data-monthly and data-annual attributes and update textContent on toggle.
4–6: Two-Column and Side-by-Side Designs
4. Free vs. Paid Two-Column
When you have a freemium model, a two-column layout forces a clean binary choice. Give the paid column a coloured left border using border-start border-5 border-primary rather than a full background change — it reads as “premium” without feeling aggressive.
5. Horizontal Feature-Row Comparison
A table-style layout where feature rows run horizontally and plans run in columns is the gold standard for products with many distinguishing features. Use a sticky first column (position-sticky start-0 bg-white) so feature labels stay visible on mobile scroll.
<div class="table-responsive">
<table class="table table-bordered align-middle text-center">
<thead class="table-dark">
<tr>
<th class="text-start" style="min-width:180px">Feature</th>
<th>Starter</th>
<th>Pro</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-start fw-semibold">Projects</td>
<td>5</td><td>Unlimited</td><td>Unlimited</td>
</tr>
<tr>
<td class="text-start fw-semibold">API Access</td>
<td>✗</td><td>✓</td><td>✓</td>
</tr>
<tr>
<td class="text-start fw-semibold">SSO</td>
<td>✗</td><td>✗</td><td>✓</td>
</tr>
</tbody>
</table>
</div>6. Two-Column Lifetime Deal Card
Lifetime or one-time pricing benefits from a landscape two-column card where the left half carries branding and the right half lists features plus a large CTA. Use Bootstrap’s row g-0 with col-md-5 / col-md-7 to build the split without custom CSS.
7–9: Single-Column and Stacked Designs
7. Minimal Single-Plan Focused Card
When your product has one paid plan (common for indie tools), eliminate comparison noise entirely. A single centred card with a generous py-5 px-4 padding, a large price, three to five bullet points, and a full-width CTA converts cleanly because there are zero alternative paths.
8. Stacked Mobile-First Cards
Use col-12 col-sm-6 col-lg-4 breakpoints so cards stack on phones, pair on tablets, and spread across three columns on desktop. Critically, move the most popular card to the top of the DOM — not the visual middle — so mobile visitors see the recommended tier first without scrolling.
9. Per-Seat / Usage-Based Slider
A Bootstrap form-range input paired with a JavaScript price calculator lets buyers dial in their team size and see a dynamic monthly total. This design pattern is exceptionally effective for per-seat SaaS products because it turns price discovery into an interactive, personalised experience.
10–13: Advanced and Niche Pricing Table Designs
10. Dark-Mode Pricing Section
Wrap the entire pricing section in bg-dark text-white and use --cnvs-themecolor (if you are building on Canvas) or Bootstrap’s --bs-primary CSS variable for accent colours. Dark sections draw the eye when placed between two light sections and signal a premium product positioning.
11. Gradient Card with Glass Effect
Apply a CSS backdrop-filter glassmorphism style to the highlighted plan card. Keep it to one card only — overusing the effect destroys the visual hierarchy you are trying to create.
<div class="card text-white text-center p-4 border-0"
style="background: linear-gradient(135deg, #6366f1, #8b5cf6);
backdrop-filter: blur(10px);">
<h3 class="fw-bold">Pro</h3>
<p class="display-4 fw-bold">$29<span class="fs-6">/mo</span></p>
<a href="#" class="btn btn-light btn-lg mt-3 w-100">Start Free Trial</a>
</div>12. Agency / Service Tier Cards with Deliverable Lists
Service businesses need to list concrete deliverables rather than feature checkboxes. Use a <dl> description list styled with Bootstrap utilities, or a two-column d-flex layout of label/value pairs. Add a “Book a Call” CTA for the top tier to route high-value prospects to a sales conversation instead of self-checkout.
13. FAQ-Embedded Pricing Section
Attach an accordion FAQ directly below the pricing cards using Bootstrap’s built-in accordion component. Objections — “Can I cancel anytime?”, “Do you offer refunds?” — answered immediately below the price prevent drop-off to a separate FAQ page and keep the visitor in a buying mindset.
Core Design Principles That Apply to Every Pattern
- One recommended plan: Highlight exactly one tier. Two highlighted plans create paralysis.
- Price anchoring: List the highest tier first (left to right) when using column layouts — it makes subsequent prices feel more reasonable.
- CTA verb matters: “Start Free Trial” outperforms “Buy Now” for subscription SaaS. “Get a Quote” signals flexibility for enterprise.
- Limit features listed: Show five to seven differentiating features per card. Long lists reduce perceived value — link to a full comparison page instead.
- Trust signals near the CTA: A single line — “No credit card required” or “Cancel anytime” — placed directly below the button removes the last micro-objection before a click.
Frequently Asked Questions
Three tiers is the most widely tested and proven structure. It provides a clear low, mid, and high anchor, gives you a natural “recommended” middle tier, and avoids the decision paralysis that comes with four or more options. If your product genuinely needs four tiers, visually de-emphasise the lowest or highest to preserve a three-tier feel.
Use Bootstrap’s responsive grid classes such as col-12 col-md-6 col-lg-4 combined with g-4 gutters. For comparison tables, wrap them in table-responsive and consider a card-based layout below the md breakpoint via CSS. Always reorder the DOM so the recommended plan appears first in source order, which means it renders at the top on small screens.
Yes. Store both prices in data-* attributes on each price element and attach a single event listener to the toggle input. On change, loop through all price elements and swap the displayed value. No framework required — the entire script fits in under twenty lines of vanilla JavaScript.
Yes. Canvas ships with multiple pre-built pricing section styles across its 50+ demo pages, including column card layouts, comparison tables, and toggle-based billing switchers. All sections use Bootstrap 5 classes and Canvas’s CSS variable system, making colour and spacing customisation straightforward without touching the core stylesheet.
Place the primary CTA button both below the feature list and, for taller cards, repeat it at the top of the card above the features. Research consistently shows that above-the-fold CTA placement captures visitors who are already decided, while a second button below the list captures those who read everything first. Using Bootstrap’s d-grid with w-100 on the button ensures it spans the full card width, maximising tap target size on mobile.
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