Comparison table
Bootstrap Comparison table - examples & tutorial
Comparison table built with Bootstrap 5. Various examples like comparison table on pricing page, comparison card and many more.
If you want to create your own examples or learn more check out the Tables documentation.
Basic example
Simple example of Comparison
| 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>
Comparison on pricing
A simple example of using item comparison on pricing pages
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 class="btn-group mb-4" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary active">Monthly billing</button>
<button type="button" 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-white 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-white py-3">
<button type="button" 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-white 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-white py-3">
<button type="button" 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-white 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-white py-3">
<button type="button" 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-white 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-white py-3">
<button type="button" class="btn btn-info btn-sm">Buy now</button>
</div>
</div>
<!-- Card -->
</div>
<!--Grid column-->
</div>
</section>
<!--Section: Content-->
</div>
Extended comparison table
Comprehensive example of a comparison table
| 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 class="btn btn-primary">Sign-up</button></th>
<th class=""><button class="btn btn-primary">Buy Now</button></th>
<th class=""><button class="btn btn-primary">Buy Now</button></th>
<th class=""></th>
</tr>
</tbody>
</table>
</div>
Advanced Comparison table on pricing
A minimalist example of comparing items on pricing pages
Pricing
<section class="text-center">
<h4 class="mb-4"><strong>Pricing</strong></h4>
<div class="btn-group mb-4" role="group" aria-label="Basic example">
<button type="button" class="btn btn-dark active">Monthly billing</button>
<button type="button" 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="#" 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="#" 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="#" 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="#" 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
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-black" style="font-size: 40px;">$199 <small class="text-muted"
style="font-size: 15px;">USD</small></p>
<p class="text-decoration-underline text-black-50 " style="font-size: 15px;">Learn more about our
company</p>
<a href="#" 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: "";
}