Bootstrap 5 Pricing Comparison Table Snippet

This Bootstrap pricing table snippet has a responsive and trendy layout. This Bootstrap pricing table layout supports the comparison of plan features. Tick and cross icons made this snippet simply awesome.
Bootstrap 5 Pricing Snippet Features Comparison Table
The snippet has an appealing heading and Call to Action (CTA) buttons. A formal and raised visual hierarchy has made a clear comparison between starter and pro plans.
Tools
Bootstrap Framework
We are using the Bootstrap framework to build this component. This template is compatible with the Bootstrap 5+ framework. This code snippet example has no dependency and is straightforward to use in Bootstrap projects.
Features
- Bootstrap 5
- BS Brain Framework
- HTML5 & CSS3
- W3C Valid
- Commented Code
- Pricing Table
- Responsive Layout
- Minimal Design
- Clean Snippet
- SEO Optimized
- Easy to Use
- Cross Browser Compatible
Browse
Preview
<!-- Pricing 1 - Bootstrap Brain Component -->
<section class="bsb-pricing-1 bg-light py-3 py-md-5 py-xl-8">
<div class="container">
<div class="row gy-5 gy-lg-0 align-items-center">
<div class="col-12 col-lg-4">
<h2 class="display-5 mb-3 mb-xl-4">Our Pricing</h2>
<p class="lead mb-4 mb-xl-5">Explore our flexible pricing to find an excellent fit to run your business.</p>
<a href="#!" class="btn bsb-btn-2xl btn-primary rounded-pill">More Plans</a>
</div>
<div class="col-12 col-lg-8">
<div class="row justify-content-xl-end">
<div class="col-12 col-xl-11">
<div class="row gy-4 gy-md-0 gx-xxl-5">
<div class="col-12 col-md-6">
<div class="card border-0 border-bottom border-primary shadow-sm">
<div class="card-body p-4 p-xxl-5">
<h2 class="h4 mb-2">Starter</h2>
<h4 class="display-3 fw-bold text-primary mb-0">$45</h4>
<p class="text-secondary mb-4">USD / Month</p>
<ul class="list-group list-group-flush mb-4">
<li class="list-group-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
<span><strong>5</strong> Bootstrap Install</span>
</li>
<li class="list-group-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
<span><strong>100,000</strong> Visits</span>
</li>
<li class="list-group-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
<span><strong>30 GB</strong> Disk Space</span>
</li>
<li class="list-group-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x text-danger" viewBox="0 0 16 16">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
<span>Free <strong>SSL and CDN</strong></span>
</li>
<li class="list-group-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x text-danger" viewBox="0 0 16 16">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
<span>Free <strong>Support</strong></span>
</li>
</ul>
<a href="#!" class="btn bsb-btn-2xl btn-primary rounded-pill">Choose Plan</a>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card border-0 border-bottom border-primary shadow-lg pt-md-4 pb-md-4 bsb-pricing-popular">
<div class="card-body p-4 p-xxl-5">
<h2 class="h4 mb-2">Pro</h2>
<h4 class="display-3 fw-bold text-primary mb-0">$149</h4>
<p class="text-secondary mb-4">USD / Month</p>
<ul class="list-group list-group-flush mb-4">
<li class="list-group-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
<span><strong>20</strong> Bootstrap Install</span>
</li>
<li class="list-group-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
<span><strong>400,000</strong> Visits</span>
</li>
<li class="list-group-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
<span><strong>50 GB</strong> Disk Space</span>
</li>
<li class="list-group-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
<span>Free <strong>SSL and CDN</strong></span>
</li>
<li class="list-group-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
<span>Free <strong>Support</strong></span>
</li>
</ul>
<a href="#!" class="btn bsb-btn-2xl btn-primary rounded-pill">Choose Plan</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CSS Files -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/pricings/pricing-1/assets/css/pricing-1.css" />
- Use in personal projects
- Customize the template files
- Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- Free Updates
- Access to all 5 Pro Templates
- Access to all 34 Pro Components
- Use in SaaS
- Resell & Redistribute
BB Startup
Freelancer
$49
3 Months Access
5 Pro BS Templates
34 Pro BS Components
- Use in personal projects
- Customize the template files
- Unlimited Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- 3 Months Free Updates
- Access to all our 5 Pro Templates
- Access to all our 34 Pro Components
-
Use in SaaS -
Resell & Redistribute
BB Club
Agency
$149
12 Months Access
5 Pro BS Templates
34 Pro BS Components
- Use in personal projects
- Customize the template files
- Unlimited Number of websites/domains
- Create websites for clients
- Remove footer credit link
- Working PHP/AJAX contact form
- Sass/SCSS Files
- JS Source Files
- Premium support via Email
- Forum support
- 12 Months Free Updates
- Access to all our 5 Pro Templates
- Access to all our 34 Pro Components
- Use in SaaS
-
Resell & Redistribute
Bootstrap 5 Pricing Table Snippets
Browse these valuable snippets of the Bootstrap pricing table. These comparison Bootstrap pricing tables are straightforward to customize.