Bootstrap 5 pricing tables and plan comparison layouts. This page covers 4 patterns — three-column plans, toggle billing, feature comparison table and dark theme.
Key Pattern
<!-- Featured plan highlight -->
<div class="card h-100" style="border:2px solid #fd4766!important;">
<div class="position-absolute top-0 start-50 translate-middle">
<span class="badge text-white" style="background:#fd4766;">Most Popular</span>
</div>
...
</div>
1. Bootstrap 5 Three-Column Pricing Table
Classic three-tier pricing with free, pro and team plans. Featured plan has accent border.
2. Bootstrap 5 Pricing Table with Monthly/Yearly Toggle
Pricing table that switches between monthly and annual billing with a toggle switch.
3. Bootstrap 5 Feature Comparison Table
Full feature comparison table — rows for each feature, columns for each plan.
4. Bootstrap 5 Dark Pricing Table
Dark themed pricing table — common on SaaS landing pages with dark hero sections.
Frequently Asked Questions
Add a distinct border: style='border:2px solid #fd4766!important'. Add a badge above the card using position:absolute top-0 start-50 translate-middle. Make the CTA button solid while others are outline. Optionally increase the card's shadow.
Use a form-switch checkbox to toggle state. In JavaScript, listen for change events and update price elements based on the checked state. Apply a discount (e.g. 20%) to annual prices. Update button text to reflect current billing cycle.
Add h-100 to each card and ensure each col has the same height context: use row with d-flex or let Bootstrap grid handle it. The row already uses flexbox so direct col children are equal height. Add h-100 to the card inside.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.