Bootstrap 5 pricing cards display subscription plans and product tiers. This page covers 4 pricing patterns — basic, dark, toggle and horizontal — each ready to use on landing and pricing pages.

Quick Setup

Pricing cards need only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

ClassWhat It Does
.cardPricing card wrapper
.card-headerFeatured plan badge header
.display-5Large price number
.list-unstyledFeature list without bullets
.h-100Equal height cards in grid
.border-2Thicker border for featured card
.form-check.form-switchMonthly/annual toggle

1. Bootstrap 5 Basic Pricing Cards

Three pricing plan cards — Free, Pro and Enterprise — with feature lists and CTA buttons.

2. Bootstrap 5 Dark Pricing Cards

Dark themed pricing cards with gradient highlight on the featured plan.

3. Bootstrap 5 Pricing Toggle Monthly/Annual

Pricing cards with a monthly/annual toggle switch. Annual pricing shows discounted rates.

4. Bootstrap 5 Horizontal Pricing Card

A single horizontal pricing card with features on the left and CTA on the right. Great for simple upgrade prompts.

Frequently Asked Questions

Add a colored border and a 'Most Popular' badge header: <div class='card border-2' style='border-color:#fd4766'><div class='card-header text-white' style='background:#fd4766'>Most Popular</div>. Use box-shadow to make it stand out further: class='card shadow-lg'.
Use a form-switch checkbox. Add a change event listener that updates price text content based on the toggle state. Store monthly and annual prices in data attributes or JavaScript variables and swap them on toggle. Update any savings badges or billing notes too.
Add h-100 to each card and wrap them in a row with d-flex: <div class='row row-cols-1 row-cols-md-3 g-4'>. Each col gets <div class='col'>. The card gets class='card h-100'. Bootstrap flexbox automatically makes all cards in the row equal height.
Add a table below the pricing cards with each plan as a column. Use checkmark (✅) and cross (❌) symbols or Bootstrap Icons for feature availability. Style the header row with plan names and prices. Use table-striped for readability.
Add a card-header with the badge text: <div class='card-header text-center text-white' style='background:#fd4766'>Most Popular</div>. Or use position-absolute for a floating badge: <span class='badge position-absolute top-0 start-50 translate-middle' style='background:#fd4766'>Popular</span>. Add position-relative to the card.

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.

Related Components

Bootstrap 5 Card Example

View examples →

Bootstrap 5 Hero Section

View examples →

Bootstrap 5 Button Styles

View examples →