This tutorial will guide you through creating a responsive pricing table using Bootstrap 5. You’ll learn how to structure your HTML for optimal responsiveness and styling. This is a great way to showcase different pricing tiers for your product or service.
Step 1: Include Bootstrap 5
Add Bootstrap CSS
Include the necessary Bootstrap CSS file in the `<head>` section of your HTML document. This links your project to Bootstrap’s styling library.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
Step 2: Create the HTML Structure
This section outlines the HTML code to create the pricing table. We’ll use Bootstrap’s grid system for responsiveness and its card component for styling each pricing plan.
<!-- Section -->
<section class="py-5">
<div class="container">
<div class="row row-cols-1 row-cols-md-3 g-3 g-md-4 justify-content-center align-items-center text-center">
<!-- Column -->
<div class="col">
<div class="card">
<!-- Text -->
<div class="card-header bg-transparent p-4">
<h5 class="fs-6 fw-bold text-uppercase mb-0">Free</h5>
</div>
<div class="card-body p-4">
<h4 class="display-4 mb-0"> $0<small class="fs-6">/ mo</small> </h4>
<!-- Features List -->
<ul class="list-unstyled p-0 lh-lg my-5">
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-check text-success" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
10 users included
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-check text-success" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
2 GB of storage
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-check text-success" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
Email support
</li>
</ul>
<!-- Button -->
<a class="btn btn-outline-primary" href="#">Sign Up</a>
</div>
</div>
</div>
<!-- Column -->
<div class="col">
<div class="card border-primary">
<!-- Text -->
<div class="card-header text-white bg-primary border-primary p-4">
<h5 class="fs-6 fw-bold text-uppercase mb-0">Pro</h5>
<small class="alert alert-light d-inline-block p-2 mt-3 mb-0" role="alert">
Best Value
</small>
</div>
<div class="card-body p-4">
<h4 class="display-4"> $5<small class="fs-6">/ mo</small> </h4>
<p>Billed $60 per website annually. </p>
<hr>
<!-- Features List -->
<ul class="list-unstyled p-0 lh-lg my-5">
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-check text-success" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
20 users included
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-check text-success" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
10 GB of storage <small class="alert alert-success d-inline-block p-0 px-2 m-0 mx-1 lh-sm" role="alert">
30% OFF
</small>
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-check text-success" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
Priority email support
</li>
</ul>
<!-- Button -->
<a class="btn btn-primary" href="#">Sign Up</a>
</div>
</div>
</div>
<!-- Column -->
<div class="col">
<div class="card">
<!-- Text -->
<div class="card-header bg-transparent p-4">
<h5 class="fs-6 fw-bold text-uppercase mb-0">Developer</h5>
</div>
<div class="card-body p-4">
<h4 class="display-4 mb-0"> $10<small class="fs-6">/ mo</small> </h4>
<!-- Features List -->
<ul class="list-unstyled p-0 lh-lg my-5">
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-check text-success" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
30 users included
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-check text-success" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
15 GB of storage
</li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-check text-success" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
24/7 Customer Support
</li>
</ul>
<!-- Button -->
<a class="btn btn-outline-primary" href="#">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Ends !-->
That’s all! Hopefully, you have successfully created a responsive pricing table with Bootstrap 5. If you have any questions or suggestions, feel free to comment below.