# Bootstrap 5 Pricing Table

A toggleable Bootstrap 5 pricing table with a monthly and yearly billing switch, three plan cards and markup you can copy.

Built with: Bootstrap 5, Font Awesome 5.15.3

Tags: Bootstrap, Bootstrap 5, Pricing Table, Pricing Cards, Pricing

Live, editable example (HTML/CSS/JS source): https://jsfiddle.net/adminkit/5rhg1vfz/

Published: 2021-05-19 · Last updated: 2026-07-31

## FAQ

**Q: How does the monthly/yearly toggle work?**

A: It's a small bit of Bootstrap JavaScript that swaps the prices shown for each plan. You can change the values and intervals in the JSFiddle.

**Q: Can I add more than three pricing plans?**

A: Yes. The cards use Bootstrap's grid columns, so you can add a fourth plan by copying a column and adjusting the grid classes.

**Q: Does the pricing table work with dark mode?**

A: The snippet is plain Bootstrap markup, so it inherits whatever theme you drop it into, including AdminKit's dark mode.

---

Canonical HTML page: https://adminkit.io/snippets/bootstrap-5-pricing-table/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io