How do I create a responsive pricing table with cards and utilities?
Asked on Aug 18, 2025
1 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.