bootstrap-comparison-table

Comparison table built with Bootstrap 5. Various examples like comparison table on pricing page, comparison card and many more.

Usage no npm install needed!

<script type="module">
  import bootstrapComparisonTable from 'https://cdn.skypack.dev/bootstrap-comparison-table';
</script>

README

Comparison table built with Bootstrap 5. Various examples like comparison table on pricing page, comparison card and many more.

Check out Bootstrap Comparison Table Documentation for detailed instructions & even more examples.

Basic example

Bootstrap 5 Comparison Table

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

How to use?

  1. Download MDB 5 - free UI KIT

  2. Choose your favourite customized component and click on the image

  3. Copy & paste the code into your MDB project

▶️ Subscribe to YouTube channel for web development tutorials & resources

More examples

Bootstrap Comparison on pricing: Bootstrap 5 Comparison Table

Bootstrap Extended comparison table: Bootstrap 5 Comparison Table

Bootstrap Advanced Comparison table on pricing: Bootstrap 5 Comparison Table

Bootstrap Comparison card with details: Bootstrap 5 Comparison Table

More extended Bootstrap documentation