Simple Bootstrap price plan table

An example pricing plan table built with Bootstrap, structured as 3 different tiers it is fully responsive.

The CodePen example:

This requires Bootstrap and Font Awesome icons.

By using a borderless column and then adding borders for the tiers an appearance is created that doesn’t appear like a boring, standard table.

<div class="container">
    <div class="row">
        <div class="col">
            <table class="table-responsive table-borderless">
                <thead>
                <tr>
                    <th scope="col"></th>
                    <th scope="col" class="free-bg text-white p-2 p-lg-3 border text-center">Free tier</th>
                    <th scope="col" class="plus-bg text-white p-2 p-lg-3 border text-center">Plus tier</th>
                    <th scope="col" class="pro-bg text-white p-2 p-lg-3 border text-center">Pro tier</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row" class="pr-lg-3 th-desc">Feature text here</th>
                    <td class="bg-white p-2 p-lg-3 border">Lorem Ipsum is simply dummy text</td>
                    <td class="bg-white p-2 p-lg-3 border">Lorem Ipsum is simply dummy text</td>
                    <td class="bg-white p-2 p-lg-3 border">Lorem Ipsum is simply dummy text</td>
                </tr>
                <tr>
                    <th scope="row" class="pr-lg-3 th-desc">Feature text here</th>
                    <td class="bg-white p-2 p-lg-3 border">Lorem Ipsum is simply dummy text</td>
                    <td class="bg-white p-2 p-lg-3 border">Lorem Ipsum is simply dummy text</td>
                    <td class="bg-white p-2 p-lg-3 border">Lorem Ipsum is simply dummy text</td>
                </tr>
                <tr>
                    <th scope="row" class="pr-lg-3 th-desc">Feature text here</th>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        <i class="fas fa-check text-success"></i>
                    </td>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        <i class="fas fa-check text-success"></i>
                    </td>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        <i class="fas fa-check text-success"></i>
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="pr-lg-3 th-desc">Feature text here</th>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        <i class="fas fa-times text-danger"></i>
                    </td>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        <i class="fas fa-check text-success"></i>
                    </td>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        <i class="fas fa-check text-success"></i>
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="pr-lg-3 th-desc">Feature text here</th>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        <i class="fas fa-times text-danger"></i>
                    </td>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        <i class="fas fa-times text-danger"></i>
                    </td>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        <i class="fas fa-check text-success"></i>
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="pr-lg-3 th-desc">Feature text here</th>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        500
                    </td>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        1000
                    </td>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        2500
                    </td>
                </tr>
                <tr>
                    <th scope="row" class="pr-lg-3 th-desc">Price</th>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        Free
                    </td>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        <s class="text-danger">$40.00</s> <span class="text-success">20.00</span>
                    </td>
                    <td class="bg-white p-2 p-lg-3 border text-center">
                        <s class="text-danger">$100.00</s> <span class="text-success">50.00</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Some custom styling:

.free-bg {
  background: #97b2f2;
}

.plus-bg {
  background: #6792f3;
}

.pro-bg {
  background: #366ef1;
}

.th-desc {
  min-width: 150px
}