How do I create a responsive pricing table with cards and utilities?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How do I create a responsive pricing table with cards and utilities?

Asked on Aug 06, 2025

Answer

To create a responsive pricing table using Bootstrap 5, you can utilize the card component along with Bootstrap's grid system and utility classes. Here's a basic example to get you started.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">Basic Plan</h5>
                            <p class="card-text">$9.99/month</p>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">Feature 1</li>
                                <li class="list-group-item">Feature 2</li>
                                <li class="list-group-item">Feature 3</li>
                            </ul>
                        </div>
                        <div class="card-footer">
                            <button class="btn btn-primary">Choose Plan</button>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">Standard Plan</h5>
                            <p class="card-text">$19.99/month</p>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">Feature 1</li>
                                <li class="list-group-item">Feature 2</li>
                                <li class="list-group-item">Feature 3</li>
                            </ul>
                        </div>
                        <div class="card-footer">
                            <button class="btn btn-primary">Choose Plan</button>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        <div class="card-body">
                            <h5 class="card-title">Premium Plan</h5>
                            <p class="card-text">$29.99/month</p>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">Feature 1</li>
                                <li class="list-group-item">Feature 2</li>
                                <li class="list-group-item">Feature 3</li>
                            </ul>
                        </div>
                        <div class="card-footer">
                            <button class="btn btn-primary">Choose Plan</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `.container` class centers the content and provides responsive padding.
The `.row-cols

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I create a responsive pricing table with cards and utilities?

Asked on Aug 06, 2025

Answer

The Q&A Network