Any website selling products or services on the Internet requires a pricing table. Bootstrap 4 does not come with built-in pricing table component but it is fairly easy to create a pricing table using Bootstrap 4 card and list group components.

As always, we will not try to reinvent the wheel. We will use Bootstrap 4 CSS rules as much as possible to design our pricing table. Let's start with HTML markup of our pricing table.

Pricing table HTML markup

Following is the HTML markup for our pricing table component:

<!DOCTYPE html>
<html lang='en'>
<head>
    <!--required meta tags-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Add Boostrap 4 default stylesheet -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div class="row">
    <div class="container">
        <div class="col-sm-12">
            <div class="card-deck text-center pricing-table">
                <div class="card">
                    <div class="card-header bg-dark text-white">
                        <h4>Basic</h4>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group">
                            <li class="list-group-item bg-light"><h5>$9.99 / year</h5></li>
                            <li class="list-group-item">10GB Storage</li>
                            <li class="list-group-item">10 Emails</li>
                            <li class="list-group-item">10 Domains</li>
                            <li class="list-group-item">1GB Bandwidth</li>
                            <li class="list-group-item">Basic Support</li>
                        </ul>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Get Started</a>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h4>Pro</h4>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group">
                            <li class="list-group-item bg-light"><h5>$24.99 / year</h5></li>
                            <li class="list-group-item">25GB Storage</li>
                            <li class="list-group-item">25 Emails</li>
                            <li class="list-group-item">25 Domains</li>
                            <li class="list-group-item">2GB Bandwidth</li>
                            <li class="list-group-item">Priority Support</li>
                        </ul>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Get Started</a>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header bg-dark text-white">
                        <h4>Premium</h4>
                    </div>
                    <div class="card-body p-0">
                        <ul class="list-group">
                            <li class="list-group-item bg-light"><h5>$49.99 / year</h5></li>
                            <li class="list-group-item">50GB Storage</li>
                            <li class="list-group-item">50 Emails</li>
                            <li class="list-group-item">50 Domains</li>
                            <li class="list-group-item">5GB Bandwidth</li>
                            <li class="list-group-item">Email & Phone Support</li>
                        </ul>
                    </div>
                    <div class="card-footer">
                        <a href="#" class="btn btn-primary">Get Started</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

If you look at the above code snippet, I used .card-decks class which is provided by Bootstrap 4 and used to create a set of equal width and height cards that aren’t attached to one another.

Pricing table CSS

Since we used Bootstrap 4 card and list group components in our pricing table markup, our custom CSS rules are of just few lines.

.pricing-table .list-group > .list-group-item, .pricing-table .card-footer {
    border: none;
    padding: 0.85rem 1.25rem;
}

Isn't good to have just few lines of custom CSS? Yes, it is! Thanks to Bootstrap 4 powerful card component which is much more flexible and extensible and can be used to create a variety of new components. Here is how our final pricing table looks like:

Bootstrap 4 Pricing Table

Conclusion

That's all for creating a basic pricing table in Bootstrap 4. If you are looking for an advance pricing table example, please look at our free pricing table component which has more variants.

Don't forget to subscribe to our Weekly Design newsletter to get weekly recap of best design articles, resources and jobs every Monday 10am. Find this article useful? Share it with your friends and followers below.