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

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

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