Creating Stylish Pricing Cards with Bootstrap 5
Written on
Chapter 1: Introduction to Bootstrap 5
Bootstrap has dominated the web development landscape for many years, becoming a staple for developers worldwide. While the emergence of Tailwind CSS has sparked discussions about Bootstrap's relevance, I firmly believe that Bootstrap is far from obsolete. I am currently engaged in a project that utilizes Bootstrap, and its widespread recognition among developers makes it a practical choice for large organizations seeking skilled professionals. Additionally, Bootstrap’s long-standing presence in the industry has led to extensive testing and refinement over the years. Although I personally lean towards Tailwind, having a solid understanding of Bootstrap's functionality is undeniably beneficial.
In this tutorial, I’ll guide you through the process of creating visually appealing pricing cards.
Section 1.1: Project Setup
For this tutorial, we will be working solely with an index.html file. You can incorporate Bootstrap via CDN for convenience, or download it directly or through npm if that suits your preference. Additionally, we will utilize some icons from Bootstrap Icons.
Section 1.2: Basic Structure of Pricing Cards
To start, let’s create a layout with two columns using Bootstrap’s grid system, which divides a row into 12 columns. By employing col-md-6, we can ensure that each column occupies half the available space.
In this video, we explore how to effectively utilize Bootstrap's card component for pricing tables, ensuring a clean and professional look.
Section 1.3: Designing the Basic Card
We’ll leverage various utility classes from Bootstrap, which are quite intuitive to use, similar to Tailwind's approach. Here’s an example of a simple card:
<div class="card">
<h2>Free Forever</h2>
<ul class="list-group">
<li class="list-group-item border-0">100MB Storage</li>
<li class="list-group-item border-0">Unlimited tasks</li>
<li class="list-group-item border-0">Unlimited Free Plan Members</li>
<li class="list-group-item border-0">Whiteboards</li>
</ul>
</div>
If implemented correctly, your card should appear as intended.
Section 1.4: Enhancing the Card Body
We’ve added an h2 tag to display the price and included four items. The vstack class acts as a flex container, allowing us to manage spacing between the elements effectively. We’ve also used border-0 on the list-group-item to eliminate lines between the items.
Your card should now have a more polished appearance, but we need to add a button at the bottom.
Section 1.5: Adding the Card Button
Insert the following code within the ul tag. We’re adding a black button with rounded edges.
<button class="btn btn-dark">Free Forever</button>
Chapter 2: Creating a Second Card
The second card will share a similar structure, with the primary difference being the color scheme. I've applied text-bg-dark and modified the button to btn-light.
<div class="card">
<h2>Unlimited</h2>
<ul class="list-group">
<li class="list-group-item border-0">Unlimited Storage</li>
<li class="list-group-item border-0">Unlimited Integrations</li>
<li class="list-group-item border-0">Unlimited Dashboards</li>
<li class="list-group-item border-0">Guests with permissions</li>
</ul>
<button class="btn btn-light">Get started</button>
</div>
In this video, we explore creating a pricing page with a carousel feature, enhancing the presentation of your pricing cards.
Result
And there you have it! The final design looks impressive, and all of this was achieved without any custom styles—just a combination of utility classes and Bootstrap buttons.
If you enjoyed this tutorial and wish to join our growing community, please hit the follow button! I welcome your feedback and comments—don’t hesitate to share your thoughts!