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
Edit in sandbox 
<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

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
Edit in sandbox 
<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
Edit in sandbox 
<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

Hobby

All the essentials for starting a business

$12/mo

Buy Hobby

What's included

  1. Lorem Ipsum
  2. Lorem Ipsum
Freelancer

All the essentials for starting a business

$20/mo

Buy Freelancer

What's included

  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum
Startup

All the essentials for starting a business

$40/mo

Buy Startup

What's included

  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum
  4. Lorem Ipsum
Enterprise

All the essentials for starting a business

$55/mo

Buy Enterprise

What's included

  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum
  4. Lorem Ipsum
  5. Lorem Ipsum
  6. Lorem Ipsum
  7. Lorem Ipsum
Edit in sandbox 
<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

  1. Lorem Ipsum
  2. Lorem Ipsum

  1. Lorem Ipsum
  2. Lorem Ipsum

Pay once, own it forever

$199 USD

Learn more about our company

Get Access

Get a free sample (20MB)

Edit in sandbox 
<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: "";
}