Pricing tables are great for showing the prices of your services and products, making it easier for clients to choose the right option for them.
Bootstrap 5 makes it very easy to create pricing table sections on your websites and this is where we’ll focus on today.
I’ve created 3 pricing table templates you can download for free and customize as you like. I’ll also show the code for one of them.
The tables include the product’s title, price, features, sign-up button, and a recommended option. I’ve also used these pricing tables in this business template. Here they are:
Want to Save this Article?
1. Pricing Tables on White Background
I’ll also show the HTML and CSS code for this first pricing table design. As you can see, I’ve used Bootstrap classes along with some custom classes.
The HTML
<!-- Prices -->
<div class="container pb-5" id="prices">
<div class="row">
<div class="col pt-5">
<h2 class="display-2 text-uppercase azm-color-444">Our Prices<span class="azm-grey">../</span></h2>
<p class="lead azm-color-444">Claritas est etiam processus dynamicus, consectetur adipisicing elit, sed do eiusmod tempor <span class="azm-border-dashed">our packages</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</div>
<div class="row text-center">
<div class="col-md-3 mt-5">
<table class="table table-borderless shadow mt-md-4">
<thead>
<tr>
<th class="pt-4 pb-3" scope="col">
<span class="fs-3 fw-medium text-uppercase azm-color-888">Basic</span><br>
<span class="lead azm-color-444">Freelancer</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">$<span class="fs-1">12</span>/month</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">1000 contacts</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">Normal speed</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">500 emails</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">300MB storage</span></td>
</tr>
<tr>
<td class="pt-3 pb-4">
<a class="btn btn-primary btn-lg azm-btn-primary" href="#"><i class="bi bi-pencil" aria-hidden="true"></i> Sign Up</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 mt-5">
<table class="table table-borderless shadow best-value">
<thead>
<tr>
<th class="pt-4 pb-0" scope="col">
<span class="fs-3 fw-medium text-uppercase azm-color-888">Ultimate</span><br>
<span class="lead azm-color-444">Best Value</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-0"><span class="best-value-icon azm-color-2BA560"><i class="bi bi-hand-thumbs-up-fill" aria-hidden="true"></i></span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">$<span class="fs-1">35</span>/month</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">3000 contacts</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">2x speed</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">2000 emails</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">500MB storage</span></td>
</tr>
<tr>
<td class="pt-3 pb-4">
<a class="btn btn-primary btn-lg azm-btn-primary" href="#"><i class="bi bi-pencil" aria-hidden="true"></i> Sign Up</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 mt-5">
<table class="table table-borderless shadow mt-md-4">
<thead>
<tr>
<th class="pt-4 pb-3" scope="col">
<span class="fs-3 fw-medium text-uppercase azm-color-888">Silver</span><br>
<span class="lead azm-color-444">Big Business</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">$<span class="fs-1">75</span>/month</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">5000 contacts</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">4x speed</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">4000 emails</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">900MB storage</span></td>
</tr>
<tr>
<td class="pt-3 pb-4">
<a class="btn btn-primary btn-lg azm-btn-primary" href="#"><i class="bi bi-pencil" aria-hidden="true"></i> Sign Up</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 mt-5">
<table class="table table-borderless shadow mt-md-4">
<thead>
<tr>
<th class="pt-4 pb-3" scope="col">
<span class="fs-3 fw-medium text-uppercase azm-color-888">Platinum</span><br>
<span class="lead azm-color-444">Bigger Business</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">$<span class="fs-1">120</span>/month</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">7000 contacts</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">6x speed</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">8000 emails</span></td>
</tr>
<tr>
<td><span class="azm-color-666 azm-font-size-1-15">2GB storage</span></td>
</tr>
<tr>
<td class="pt-3 pb-4">
<a class="btn btn-primary btn-lg azm-btn-primary" href="#"><i class="bi bi-pencil" aria-hidden="true"></i> Sign Up</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The CSS
/* Links */
a {
color: #2BA560;
text-decoration: none;
transition: all .15s ease-in-out;
}
a:hover,
a:focus { color: #119048; }
/* Buttons - restyling Bootstrap buttons */
.btn.azm-btn-primary { background-color: #2BA560; border-color: #2BA560; }
.btn.azm-btn-primary:hover { background-color: #119048; border-color: #119048; }
.btn.azm-btn-primary:active { background-color: #119048; border-color: #119048; }
.btn.azm-btn-primary:focus { background-color: #119048; border-color: #119048; color: #fff; }
.btn.azm-btn-primary:active:focus { background-color: #119048; border-color: #119048; color: #fff; }
.btn.azm-btn-primary:focus-visible {
background-color: #119048;
border-color: #119048;
box-shadow: 0 0 0 0.25rem rgba(43, 165, 96, .5);
}
/* Custom utility classes */
.azm-color-444 { color: #444; }
.azm-color-666 { color: #666; }
.azm-color-888 { color: #888; }
.azm-color-2BA560 { color: #2BA560; }
.azm-color-ccc { color: #ccc; }
.azm-grey { color: #aaa; }
.azm-font-size-1-15 { font-size: 1.15rem; }
.azm-line-height-2-5 { line-height: 2.5rem; }
.azm-border-dashed { border-bottom: 1px dashed; }
.azm-background-3d3d3d { background-color: #3d3d3d; }
.azm-background-444 { background-color: #444; }
.azm-background-555 { background-color: #555 !important; }
/* Prices */
#prices .table th {
border-bottom: 1px dashed #eee;
}
#prices .table.best-value th { border: 0; }
#prices .table:hover {
transition: all .15s ease-in-out;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3) !important;
}
#prices .best-value-icon {
font-size: 5rem;
}
/**** continues with the other pricing tables... ****/
2. Pricing Tables on Full-screen Image Background
3. Pricing Tables on Dark Background
DEMO and DOWNLOAD
DOWNLOAD: