Creating a Responsive Pricing Table with Bootstrap

This tutorial provides a comprehensive guide on creating a responsive pricing table using Bootstrap, a popular front-end framework. A well-designed pricing table effectively showcases various pricing options for services or products.

Key Concepts

• Bootstrap Framework: A CSS framework that enables developers to quickly create responsive and mobile-first websites.
• Pricing Table: A visual representation of different pricing tiers or plans, commonly used for subscription services or products.

Steps to Create a Pricing Table

• Include Bootstrap CSS and JS in your HTML document.
• Use a Bootstrap container to hold the pricing table.
• Each pricing plan is represented as a card. Use Bootstrap's grid system to arrange them.
1. Styling:
   • Utilize Bootstrap classes for styling, such as card, btn, and text-center, to enhance the visual appeal of the pricing table.

Add Pricing Cards:

<div class="col-md-4">
    <div class="card">
        <div class="card-header">Basic Plan</div>
        <div class="card-body">
            <h5 class="card-title">$19/month</h5>
            <p class="card-text">Some quick example text to build on the card title.</p>
            <a href="#" class="btn btn-primary">Sign Up</a>
        </div>
    </div>
</div>

Create a Container:

<div class="container">
    <div class="row">
        <!-- Pricing Cards will go here -->
    </div>
</div>

Set Up Bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Example of a Basic Pricing Table

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">Basic</div>
                <div class="card-body">
                    <h5 class="card-title">$10/month</h5>
                    <p class="card-text">Basic features for individuals.</p>
                    <a href="#" class="btn btn-primary">Choose Plan</a>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">Pro</div>
                <div class="card-body">
                    <h5 class="card-title">$20/month</h5>
                    <p class="card-text">Advanced features for professionals.</p>
                    <a href="#" class="btn btn-primary">Choose Plan</a>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">Enterprise</div>
                <div class="card-body">
                    <h5 class="card-title">$30/month</h5>
                    <p class="card-text">All features for large organizations.</p>
                    <a href="#" class="btn btn-primary">Choose Plan</a>
                </div>
            </div>
        </div>
    </div>
</div>

Conclusion

Creating a pricing table with Bootstrap is straightforward and results in a clean, responsive design. By leveraging Bootstrap's grid system and card components, even beginners can effortlessly set up a professional-looking pricing layout for their websites.