How do I build a responsive pricing table with Bootstrap 5? Pending Review
Asked on Sep 16, 2025
1 Answer
Creating a responsive pricing table with Bootstrap 5 involves using the grid system and utility classes to ensure that the table adjusts to different screen sizes. Here's a simple example of how you can achieve this:
<!-- BEGIN COPY / PASTE -->
<div class="container my-5">
<div class="row">
<div class="col-lg-4 mb-4">
<div class="card h-100">
<div class="card-header text-center">
Basic Plan
</div>
<div class="card-body text-center">
<h2 class="card-title">$10/month</h2>
<ul class="list-unstyled">
<li>10 Users</li>
<li>10GB Storage</li>
<li>Email Support</li>
</ul>
</div>
<div class="card-footer text-center">
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<div class="card-header text-center">
Pro Plan
</div>
<div class="card-body text-center">
<h2 class="card-title">$20/month</h2>
<ul class="list-unstyled">
<li>50 Users</li>
<li>100GB Storage</li>
<li>Priority Email Support</li>
</ul>
</div>
<div class="card-footer text-center">
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card h-100">
<div class="card-header text-center">
Enterprise Plan
</div>
<div class="card-body text-center">
<h2 class="card-title">$30/month</h2>
<ul class="list-unstyled">
<li>Unlimited Users</li>
<li>1TB Storage</li>
<li>Phone & Email Support</li>
</ul>
</div>
<div class="card-footer text-center">
<button class="btn btn-primary">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
<!-- END COPY / PASTE -->- This example uses Bootstrap's grid system with "col-lg-4" to create three equal columns on larger screens.
- The "card" component is used to create individual pricing plans with a header
✅ Answered with Bootstrap 5 best practices.