- No data uploaded
- Instant results
Bootstrap 5 Pricing Table for Vanilla JS
A production-ready minimal pricing table: a three-tier pricing section with a monthly/yearly billing toggle, a highlighted “most popular” plan and feature checklists. Pick your brand color, toggle dark mode and corner radius — the live preview and the Vanilla JS code update instantly in your browser.
Live component editor
Live preview
<!-- Requires Bootstrap 5.3 CSS + theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css"> -->
<section class="py-5 px-4">
<div class="mw-6xl mx-auto">
<div class="text-center mb-5">
<h2 class="fs-3 fw-bold text-body-emphasis">Simple, transparent pricing</h2>
<p class="mt-2 text-body-secondary">Start free. Upgrade when you need more.</p>
<button type="button" class="btn btn-outline-secondary fw-semibold rounded-2 mt-4" data-toggle="yearly">
<span data-hide="yearly">Billed monthly · switch to yearly (save 20%)</span>
<span data-show="yearly" hidden>Billed yearly · switch to monthly</span>
</button>
</div>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="h-100 p-5 d-flex flex-column bg-body border shadow-sm rounded-3">
<div class="d-flex align-items-center justify-content-between">
<h3 class="fs-5 fw-semibold text-body-emphasis">Starter</h3>
</div>
<p class="mt-1 small text-body-secondary">For side projects.</p>
<p class="mt-4">
<span class="fs-2 fw-bold text-body-emphasis"><span data-hide="yearly">$0</span><span data-show="yearly" hidden>$0</span></span>
<span class="small text-body-secondary">/month</span>
</p>
<ul class="list-unstyled mt-4 mb-5 d-flex flex-column gap-2 flex-fill">
<li class="d-flex align-items-start gap-2 small text-body"><svg class="flex-shrink-0 mt-1 text-brand" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>1 project</li>
<li class="d-flex align-items-start gap-2 small text-body"><svg class="flex-shrink-0 mt-1 text-brand" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Community support</li>
<li class="d-flex align-items-start gap-2 small text-body"><svg class="flex-shrink-0 mt-1 text-brand" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Basic analytics</li>
</ul>
<a href="#" class="btn btn-outline-secondary fw-semibold rounded-2 w-100">Get started</a>
</div>
</div>
<div class="col">
<div class="h-100 p-5 d-flex flex-column bg-body border shadow-sm rounded-3 border-brand">
<div class="d-flex align-items-center justify-content-between">
<h3 class="fs-5 fw-semibold text-body-emphasis">Pro</h3>
<span class="badge rounded-pill bg-brand-subtle text-brand">Most popular</span>
</div>
<p class="mt-1 small text-body-secondary">For growing teams.</p>
<p class="mt-4">
<span class="fs-2 fw-bold text-body-emphasis"><span data-hide="yearly">$29</span><span data-show="yearly" hidden>$24</span></span>
<span class="small text-body-secondary">/month</span>
</p>
<ul class="list-unstyled mt-4 mb-5 d-flex flex-column gap-2 flex-fill">
<li class="d-flex align-items-start gap-2 small text-body"><svg class="flex-shrink-0 mt-1 text-brand" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Unlimited projects</li>
<li class="d-flex align-items-start gap-2 small text-body"><svg class="flex-shrink-0 mt-1 text-brand" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Priority support</li>
<li class="d-flex align-items-start gap-2 small text-body"><svg class="flex-shrink-0 mt-1 text-brand" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Advanced analytics</li>
<li class="d-flex align-items-start gap-2 small text-body"><svg class="flex-shrink-0 mt-1 text-brand" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Custom domains</li>
</ul>
<a href="#" class="btn btn-brand fw-semibold rounded-2 w-100">Start free trial</a>
</div>
</div>
<div class="col">
<div class="h-100 p-5 d-flex flex-column bg-body border shadow-sm rounded-3">
<div class="d-flex align-items-center justify-content-between">
<h3 class="fs-5 fw-semibold text-body-emphasis">Enterprise</h3>
</div>
<p class="mt-1 small text-body-secondary">For large organisations.</p>
<p class="mt-4">
<span class="fs-2 fw-bold text-body-emphasis"><span data-hide="yearly">$99</span><span data-show="yearly" hidden>$79</span></span>
<span class="small text-body-secondary">/month</span>
</p>
<ul class="list-unstyled mt-4 mb-5 d-flex flex-column gap-2 flex-fill">
<li class="d-flex align-items-start gap-2 small text-body"><svg class="flex-shrink-0 mt-1 text-brand" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>SSO & SAML</li>
<li class="d-flex align-items-start gap-2 small text-body"><svg class="flex-shrink-0 mt-1 text-brand" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Dedicated manager</li>
<li class="d-flex align-items-start gap-2 small text-body"><svg class="flex-shrink-0 mt-1 text-brand" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Audit logs</li>
<li class="d-flex align-items-start gap-2 small text-body"><svg class="flex-shrink-0 mt-1 text-brand" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>99.99% SLA</li>
</ul>
<a href="#" class="btn btn-outline-secondary fw-semibold rounded-2 w-100">Start free trial</a>
</div>
</div>
</div>
</div>
</section>
<script>
(() => {
const state = { yearly: false };
const actions = { };
const pair = (s) => s.split(':');
const sync = () => {
document.querySelectorAll('[data-show]').forEach((el) => (el.hidden = !state[el.dataset.show]));
document.querySelectorAll('[data-hide]').forEach((el) => (el.hidden = !!state[el.dataset.hide]));
document.querySelectorAll('[data-when]').forEach((el) => { const [k, v] = pair(el.dataset.when); el.hidden = state[k] !== v; });
document.querySelectorAll('[data-pressed]').forEach((el) => { const [k, v] = pair(el.dataset.pressed); el.setAttribute('aria-pressed', String(state[k] === v)); });
document.querySelectorAll('[data-expanded]').forEach((el) => el.setAttribute('aria-expanded', String(!!state[el.dataset.expanded])));
};
document.addEventListener('click', (e) => {
const t = e.target.closest('[data-toggle],[data-open],[data-close],[data-set],[data-call]');
if (!t) return;
const { toggle, open, close, set, call } = t.dataset;
if (call) actions[call]?.(e);
if (toggle) state[toggle] = !state[toggle];
if (open) state[open] = true;
if (close) state[close] = false;
if (set) { const [k, v] = pair(set); state[k] = v; }
sync();
});
sync();
})();
</script>
/* theme.css — brand color #4f46e5 for Bootstrap 5.3 */
:root { --brand: #4f46e5; --brand-hover: #433cc3; --brand-rgb: 79, 70, 229; --brand-contrast: #ffffff; }
.btn-brand {
--bs-btn-color: var(--brand-contrast); --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
--bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
--bs-btn-active-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}
.text-brand { color: var(--brand) !important; }
.border-brand { border: 2px solid var(--brand) !important; }
.bg-brand-subtle { background-color: rgba(var(--brand-rgb), .12) !important; }
.form-control:focus, .form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.overlay { background: rgba(15, 23, 42, .5); backdrop-filter: blur(4px); z-index: 1050; }
.choice[aria-pressed="true"] { border-color: var(--brand) !important; color: var(--brand) !important; box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2); }
.mw-sm { max-width: 24rem; } .mw-md { max-width: 28rem; } .mw-lg { max-width: 32rem; } .mw-xl { max-width: 36rem; }
.mw-2xl { max-width: 42rem; } .mw-4xl { max-width: 56rem; } .mw-6xl { max-width: 72rem; }
More Bootstrap components for Vanilla JS
All components →- Currency Pricing Table A dynamic pricing section that detects the visitor’s currency, shows purchasing-power-adjusted regional prices and lets users switch between USD, EUR, GBP, INR and JPY
- FAQ Accordion A frequently-asked-questions section with four expandable items, each toggled by a button that exposes its state via aria-expanded
- Feature Grid A marketing section with a centered heading and a responsive grid of six feature cards, each with an icon badge, title and description
- Testimonial Slider A customer testimonial carousel that shows one quote at a time with labelled slide buttons — no autoplay, so users stay in control
- Razorpay Checkout Form A two-column checkout with an order summary (subtotal, GST, total in INR), contact fields, a UPI / card / netbanking selector and a pay button that opens Razorpay Checkout
- Login Modal A centered sign-in dialog with email and password fields, “remember me”, a forgot-password link and a social sign-in button
- Signup Form A registration card with name, email and password fields, a password hint, a terms-of-service checkbox and a primary call to action
- Navbar A responsive top navigation bar with a logo, primary links, a sign-in/CTA pair on desktop and a collapsible hamburger menu on mobile
Install Bootstrap 5 for Vanilla JS
Include Bootstrap 5.3 from the CDN (or npm install bootstrap) and the generated theme.css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="theme.css">Use the pricing table in Vanilla JS
Paste the markup where the component should appear. The small inline <script> wires up the interactive state with one delegated click listener — no framework needed.
Accessibility & customization
The billing switch is a real <button> with aria-pressed semantics handled by state, prices are plain text (no images), and decorative check icons are hidden with aria-hidden="true".
Every color, radius and dark-mode choice is baked into plain Bootstrap classes plus a tiny CSS-variable theme file, so the copied code has no runtime dependency on this site.
Compatibility
| Item | Details |
|---|---|
| CSS framework | Bootstrap 5.3+ (CSS only) |
| Library | Plain HTML + optional vanilla JS |
| Interactive state | yearly |
| Dark mode | Yes — toggle in the editor |
| Style | Minimal |
Frequently asked questions
How do I install this Bootstrap pricing table in Vanilla JS?
Create a web page, install Bootstrap 5 as shown in the installation section, then paste the generated code. Also save the generated theme.css file.
Can I change the color of the pricing table?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the pricing table support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the pricing table accessible?
The billing switch is a real <button> with aria-pressed semantics handled by state, prices are plain text (no images), and decorative check icons are hidden with aria-hidden="true".
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.