Comparison table
Bootstrap Comparison table - free examples & tutorial
Responsive comparison table templates built with Bootstrap 5. Various examples like comparison table on pricing page, comparison card, product comparison & more
If you want to create your own examples or learn more check out the Tables documentation.
Basic example
Product features comparison is usually best visualized as a table.
| PRO | Basic | |
|---|---|---|
| Domain customization | ||
| FTP | ||
| Database | ||
| Support | ||
| Backups |
<div class="table-responsive">
<table class="table table-striped fa-check text-successtable-border border-light">
<thead class="border-light">
<tr>
<th scope="col"></th>
<th scope="col"><strong>PRO</strong></th>
<th scope="col"><strong>Basic</strong></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Lorem Ipsum</th>
<td><i class="fas fa-check text-success"></i></td>
<td><i class="fas fa-times text-danger"></i></td>
</tr>
<tr>
<th scope="row">Lorem Ipsum</th>
<td><i class="fas fa-check text-success"></i></td>
<td><i class="fas fa-check text-success"></i></td>
</tr>
<tr>
<th scope="row">Lorem Ipsum</th>
<td><i class="fas fa-check text-success"></i></td>
<td><i class="fas fa-times text-danger"></i></td>
</tr>
<tr>
<th scope="row">Lorem Ipsum</th>
<td><i class="fas fa-check text-success"></i></td>
<td><i class="fas fa-check text-success"></i></td>
</tr>
<tr>
<th scope="row">Lorem Ipsum</th>
<td><i class="fas fa-check text-success"></i></td>
<td><i class="fas fa-times text-danger"></i></td>
</tr>
</tbody>
</table>
</div>
Need even more robust tables? Try Data Den.
- Quick customization & hyper-focus on data management
- Easily integrate it with any project (not only MDB)
- Column Pinning, Drag&Drop Columns, Advanced Filtering & much more
For enterprise projects & users seeking advanced data controls. Tailor your data your way.
Comparison on pricing
Pricing tiers comparison is usually created by embedding a list group inside of a card, and displaying the pricing cards next to each other with the help of a CSS grid.
Pricing
Free
Free
- Feature
- Feature
- Feature
Essential
$19/month
- Feature
- Feature
- Feature
- Feature
Advanced
$49/month
- Feature
- Feature
- Feature
- Feature
- Feature
Enterprise
$189/month
- Feature
- Feature
- Feature
- Feature
- Feature
- Feature
<div class="container">
<!--Section: Content-->
<section class="text-center">
<h4 class="mb-4"><strong>Pricing</strong></h4>
<div data-mdb-ripple-init class="btn-group mb-4" role="group" aria-label="Basic example">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary active">Monthly billing</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">
Annual billign <small>(2 months FREE)</small>
</button>
</div>
<div class="row gx-lg-5">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!-- Card -->
<div class="card">
<div class="card-header bg-body-tertiary py-3">
<p class="text-uppercase small mb-2"><strong>Free</strong></p>
<h5 class="mb-0">Free</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
</ul>
</div>
<div class="card-footer bg-body-tertiary py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-success btn-sm">Get it</button>
</div>
</div>
<!-- Card -->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!-- Card -->
<div class="card border border-primary">
<div class="card-header bg-body-tertiary py-3">
<p class="text-uppercase small mb-2"><strong>Essential</strong></p>
<h5 class="mb-0">$19/month</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
</ul>
</div>
<div class="card-footer bg-body-tertiary py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-sm">Buy now</button>
</div>
</div>
<!-- Card -->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!-- Card -->
<div class="card">
<div class="card-header bg-body-tertiary py-3">
<p class="text-uppercase small mb-2"><strong>Advanced</strong></p>
<h5 class="mb-0">$49/month</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
</ul>
</div>
<div class="card-footer bg-body-tertiary py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-info btn-sm">Buy now</button>
</div>
</div>
<!-- Card -->
</div>
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!-- Card -->
<div class="card">
<div class="card-header bg-body-tertiary py-3">
<p class="text-uppercase small mb-2"><strong>Enterprise</strong></p>
<h5 class="mb-0">$189/month</h5>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
<li class="list-group-item">Feature</li>
</ul>
</div>
<div class="card-footer bg-body-tertiary py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-info btn-sm">Buy now</button>
</div>
</div>
<!-- Card -->
</div>
<!--Grid column-->
</div>
</section>
<!--Section: Content-->
</div>
Extended comparison table
If your comparison table has many rows, we recommend to use a striped table to make it easier to scan. Check out our table generator to build a comparison table with customized styles.
| Basic | Standard | Premium | Managed | |
|---|---|---|---|---|
| HDD Storage | 700 MB | 1,5 GB | 50 GB | up to 5T |
| Web Server | ||||
| Database | - | Optional | ||
| DNS | - | - | ||
| Backups | - | - | ||
| Tech Support | None | 35$/incident | 15$/incident | 24/7 included |
| Free | $99/mo | $179/mo | Contact us | |
<div class="table-responsive">
<table class="table table-striped text-successtable-border border-light">
<thead class="border-light">
<tr>
<th scope="col"></th>
<th scope="col"><strong>Basic</strong></th>
<th scope="col"><strong>Standard</strong></th>
<th scope="col"><strong>Premium</strong></th>
<th scope="col"><strong>Managed</strong></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HDD Storage</th>
<td>700 MB</td>
<td>1,5 GB</td>
<td>50 GB</td>
<td>up to 5T</i></td>
</tr>
<tr>
<th scope="row">Web Server</th>
<td><i class="fas fa-check"></i></td>
<td><i class="fas fa-check"></i></td>
<td><i class="fas fa-check"></i></td>
<td><i class="fas fa-check"></i></td>
</tr>
<tr>
<th scope="row">Database</th>
<td>-</td>
<td>Optional</td>
<td><i class="fas fa-check"></i></td>
<td><i class="fas fa-check"></i></td>
</tr>
<tr>
<th scope="row">DNS</th>
<td>-</td>
<td>-</td>
<td><i class="fas fa-check"></i></td>
<td><i class="fas fa-check"></i></td>
</tr>
<tr>
<th scope="row">Backups</th>
<td>-</td>
<td>-</td>
<td><i class="fas fa-check"></i></td>
<td><i class="fas fa-check"></i></td>
</tr>
<tr>
<th scope="row">Tech Support</th>
<td>None</td>
<td>35$/incident</td>
<td>15$/incident</td>
<td>24/7 included</td>
</tr>
<tr>
<td></td>
<td class="fw-bold">Free</td>
<td class="fw-bold">$99/mo</td>
<td class="fw-bold">$179/mo</td>
<td class="fw-bold"><a href>Contact us</a></td>
</tr>
<tr>
<th class=""></th>
<th class=""><button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Sign-up</button></th>
<th class=""><button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Buy Now</button></th>
<th class=""><button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Buy Now</button></th>
<th class=""></th>
</tr>
</tbody>
</table>
</div>
Advanced Comparison table on pricing
Experiment with different pricing layouts, borders, and typography to create a customized comparison. In the example below we used a simple list with icons for the detailed features included in pricing tiers, and brought the buying button above the list to highlight the differences in tier prices above all.
Pricing
<section class="text-center">
<h4 class="mb-4"><strong>Pricing</strong></h4>
<div data-mdb-ripple-init class="btn-group mb-4" role="group" aria-label="Basic example">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-dark active">Monthly billing</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light">
Annual billign <small>(2 months FREE)</small>
</button>
</div>
</section>
<div class="row">
<div class="col-md-3">
<div class="card">
<div class="mx-2 card-body">
<h5 class="card-title my-2 ">Hobby</h5>
<p class="text-muted mb-2">
All the essentials for starting a business
</p>
<p class="h2 fw-bold">$12<small class="text-muted" style="font-size: 18px;">/mo</small></p>
<a href="#" data-mdb-ripple-init class="btn btn-dark d-block mb-2 mt-3 text-capitalize">Buy Hobby</a>
</div>
<div class="card-footer">
<p class="text-uppercase fw-bold" style="font-size: 12px;">What's included</p>
<ol class="list-unstyled mb-0 px-4">
<p class="my-3 fw-bold text-muted text-center">
</p>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
</ol>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card border border-dark">
<div class="mx-2 card-body">
<h5 class="card-title my-2 ">Freelancer</h5>
<p class="text-muted">
All the essentials for starting a business
</p>
<p class="h2 fw-bold">$20<small class="text-muted" style="font-size: 18px;">/mo</small></p>
<a href="#" data-mdb-ripple-init class="btn btn-dark d-block mb-2 mt-3 text-capitalize">Buy Freelancer</a>
</div>
<div class="card-footer">
<p class="text-uppercase fw-bold" style="font-size: 12px;">What's included</p>
<ol class="list-unstyled mb-0 px-4">
<p class="my-3 fw-bold text-muted text-center">
</p>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
</ol>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="mx-2 card-body">
<h5 class="card-title my-2 ">Startup</h5>
<p class="text-muted">
All the essentials for starting a business
</p>
<p class="h2 fw-bold">$40<small class="text-muted" style="font-size: 18px;">/mo</small></p>
<a href="#" data-mdb-ripple-init class="btn btn-dark d-block mb-2 mt-3 text-capitalize">Buy Startup</a>
</div>
<div class="card-footer">
<p class="text-uppercase fw-bold" style="font-size: 12px;">What's included</p>
<ol class="list-unstyled mb-0 px-4">
<p class="my-3 fw-bold text-muted text-center">
</p>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
</ol>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="mx-2 card-body">
<h5 class="card-title my-2 ">Enterprise</h5>
<p class="text-muted">
All the essentials for starting a business
</p>
<p class="h2 fw-bold">$55<small class="text-muted" style="font-size: 18px;">/mo</small></p>
<a href="#" data-mdb-ripple-init class="btn btn-dark d-block mb-2 mt-3 text-capitalize">Buy Enterprise</a>
</div>
<div class="card-footer">
<p class="text-uppercase fw-bold" style="font-size: 12px;">What's included</p>
<ol class="list-unstyled mb-0 px-4">
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
</ol>
</div>
</div>
</div>
</div>
Comparison card with details
If you would like to highlight one of the pricing options, you can also create a separate, full-width feature card and place it above the main comparison table.
Lifetime Membership
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate quae deserunt excepturi nihil nobis. Hic dolores architecto quod dicta, iusto odio, sit quae cum, quos alias eveniet corrupti ab pariatur.
what’s included
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
<div class="card-body px-0 py-0">
<div class="row">
<div class="col-md-8 py-2" style="background-color: white;">
<div class="mx-4 my-4">
<p class="h3 mb-3"><strong>Lifetime Membership</strong></p>
<p class="text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate quae
deserunt excepturi nihil nobis. Hic dolores architecto quod dicta, iusto odio, sit quae cum,
quos
alias eveniet corrupti ab pariatur.</p>
<p class="text-uppercase text-primary mb-0 new-section" style="font-size: 14px;"> what’s included
<span class="line-pricing"></span></p>
<div class="row">
<div class="col-md-6">
<ol class="list-unstyled mb-0 pt-0 pb-0">
<p class="my-3 fw-bold text-muted text-center">
</p>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
</ol>
</div>
<div class="col-md-6">
<ol class="list-unstyled mb-0 pt-0 pb-0">
<p class="my-3 fw-bold text-muted text-center">
</p>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i><small>Lorem Ipsum</small>
</li>
</ol>
</div>
</div>
</div>
</div>
<div class="col-md-4 text-center"
style="background-color:#F9FAFB ; box-shadow: 0px 0px 10px 1px #aaaaaa;">
<div class=" mt-5 pt-4 me-4">
<p class="h5">Pay once, own it forever</p>
<p class="h2 fw-bold text-body" style="font-size: 40px;">$199 <small class="text-muted"
style="font-size: 15px;">USD</small></p>
<p class="text-decoration-underline text-body-50 " style="font-size: 15px;">Learn more about our
company</p>
<a href="#" data-mdb-ripple-init class="btn btn-dark d-block mb-2 mt-3 text-capitalize">Get Access</a>
<p class="fw-bold mt-3" style="font-size: 13px;">Get a free sample <span
class="text-muted">(20MB)</span></p>
</div>
</div>
</div>
</div>
.new-section {
overflow :hidden;
color: gray;
text-align: left;
line-height: 1.6em;
}
.new-section::before {
display: block;
float: right;
margin-top: .7em;
border-top: 2px solid silver;
width: 78%;
content: "";
}