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>
          
        
    

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 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

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 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

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
Freelancer

All the essentials for starting a business

$20/mo

Buy Freelancer
Startup

All the essentials for starting a business

$40/mo

Buy Startup
Enterprise

All the essentials for starting a business

$55/mo

Buy Enterprise
        
            
          <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

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)

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