Title: Building a Pricing Table with Bootstrap 5 A Step-by-Step Guide
Pricing tables are essential elements for websites offering various products or services. They allow users to compare different pricing options and features quickly. Bootstrap 5 makes it easy to create stylish, responsive pricing tables that can fit any design. In this guide, we’ll go through the process of building a pricing table using Bootstrap 5.
Why Use Bootstrap 5 for Pricing Tables?
Bootstrap 5 is a great choice for pricing tables because it:
- Provides a responsive grid system: Ensures your pricing table looks good on all devices.
- Offers pre-designed components: Quickly create consistent and polished elements like buttons, badges, and cards.
- Customizable design: Allows you to easily adjust colors, typography, and spacing to match your brand.
Steps to Build a Pricing Table
- Set Up Bootstrap 5
- Create the Basic Structure of the Pricing Table
- Add Pricing Cards
- Customize the Design
- Make the Pricing Table Responsive
1. Set Up Bootstrap 5
To start, include Bootstrap 5 in your project. You can use the CDN or install it locally via npm.
Using CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Table</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Pricing Table Content will go here -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2. Create the Basic Structure of the Pricing Table
A pricing table is typically a collection of cards that display different pricing options. We’ll start by using Bootstrap’s grid system to arrange the cards.
Example: Basic Structure
<div class="container py-5">
<div class="row text-center">
<div class="col-lg-4">
<!-- Pricing Card -->
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase">Free</h5>
<h6 class="card-price">$0<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>5GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-times"></i></span>Community Access</li>
</ul>
<a href="#" class="btn btn-primary text-uppercase">Sign Up</a>
</div>
</div>
</div>
<!-- Repeat for more pricing options -->
</div>
</div>
3. Add Pricing Cards
Each pricing option is displayed within a Bootstrap card component. We’ll add a title, price, list of features, and a call-to-action button.
Example: Adding Pricing Cards
<div class="col-lg-4">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase">Pro</h5>
<h6 class="card-price">$49<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span>5 Users</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>50GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
</ul>
<a href="#" class="btn btn-primary text-uppercase">Get Started</a>
</div>
</div>
</div>
4. Customize the Design
Bootstrap provides a solid base, but you may want to customize your pricing table to better fit your brand’s aesthetics.
Example: Customizing with CSS
.card {
border: none;
border-radius: 0.5rem;
}
.card-title {
font-size: 1.25rem;
margin-bottom: 1rem;
}
.card-price {
font-size: 2.5rem;
margin: 0;
}
.card-price .period {
font-size: 1rem;
color: #6c757d;
}
.fa-ul {
padding-left: 1.5rem;
}
.btn-primary {
background-color: #007bff;
border: none;
font-size: 0.9rem;
padding: 0.75rem 1.5rem;
}
5. Make the Pricing Table Responsive
It’s essential that your pricing table looks good on all devices. Bootstrap’s grid system is already responsive, but you can further enhance the user experience on smaller screens.
Example: Enhancing Responsiveness
<div class="container py-5">
<div class="row text-center">
<div class="col-lg-4 col-md-6 mb-4">
<!-- Pricing Card -->
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h5 class="card-title text-muted text-uppercase">Basic</h5>
<h6 class="card-price">$19<span class="period">/month</span></h6>
<hr>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check"></i></span>Single User</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>10GB Storage</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Unlimited Public Projects</li>
<li><span class="fa-li"><i class="fas fa-check"></i></span>Community Access</li>
</ul>
<a href="#" class="btn btn-primary text-uppercase">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
Conclusion
Building a pricing table with Bootstrap 5 is a straightforward process that allows you to create a responsive, visually appealing element for your website. By utilizing Bootstrap’s grid system, cards, and utility classes, you can easily design a pricing table that fits your site’s aesthetic and functions well across all devices.
