Free UI/UX design course
Learn how to create exceptional designs by reading my new tutorial.
Start learningCards
Cards are one of Bootstrap's most popular components. These are very flexible "content containers" with extensible options for headers, footers, images, and a wide variety of content.
In this lesson we will learn how to create pricing cards. But let's start with the basics.
Basic example
This is a simple card with a title, text, and button.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
How it works:
card
class provides basic styling (like shadows for example) and makes sure that the card will display properly.card-body
class provides a basic padding for the content of the cardcard-title
andcard-text
classes provide...nothing. They are empty classes, which we can use if we want to globally style titles and text in our cards. You can even remove it if you want.button
is just a regular button. We talked about it in the previous lesson.
Card with an image
You can very easily add an image to your card by adding a plain <img>
element with the card-img-top
class.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
<div class="card">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.webp" class="card-img-top" alt="Fissure in Sandstone"/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
Image with ripple
To add a ripple effect and subtle hover effec you need to modify the HTML markup of the card image (click on the image to see the effect).
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-init data-mdb-ripple-color="light">
<img src="https://mdbcdn.b-cdn.net/img/new/standard/nature/111.webp" class="img-fluid"/>
<a href="#!">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
Header and footer
You can also add optional header and footer sections to the card.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Button
<div class="card text-center">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<div class="card-footer text-muted">2 days ago</div>
</div>
Step 1 - add pricing section with a grid
Below the "Details" section, add another "Pricing" section. Place a grid with 3 equal columns in it.
<!-- Section: Pricing -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Pricing</h3>
<div class="row gx-xl-5">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
</div>
</div>
</section>
<!-- Section: Pricing -->
Notice that on large screens we have 3 equal columns, and on medium screens one column is stretched to full width (col-md-12
) and below it you will find 2 equal columns (col-md-6
). This is a typical vertical tablet view.
Step 2 - add pricing cards
Now let's add empty cards containing only the header
with the title.
<!-- Section: Pricing -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Pricing</h3>
<div class="row gx-xl-5">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div class="card">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Basic</strong>
</p>
</div>
<div class="card-body">
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<div class="card">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Advanced</strong>
</p>
</div>
<div class="card-body">
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<div class="card">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Enterprise</strong>
</p>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</section>
<!-- Section: Pricing -->
One new thing is that we're using the text-uppercase
class here to capitalize letters.
Pricing
Basic
Advanced
Enterprise
Step 3 - add prices, buttons and lists
We have already learned all this in previous lessons, so there is no point in dwelling on it.
<div class="card">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Basic</strong>
</p>
<h3 class="mb-4">
<strong>$ 129</strong>
<small class="text-muted" style="font-size: 16px">/year</small>
</h3>
<button type="button" class="btn btn-secondary btn-rounded w-100 mb-3" data-mdb-ripple-init>
Buy
</button>
</div>
<div class="card-body">
<ol class="list-unstyled mb-0">
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Unlimited
updates
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Git repository
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>npm
installation
</li>
</ol>
</div>
</div>
Basic
$ 129 /year
- Unlimited updates
- Git repository
- npm installation
Let's add similar content to the rest of the cards. Of course, you can customize the texts to your preferences.
This is what the finished "Pricing" section should look like:
<!-- Section: Pricing -->
<section class="mb-5 mb-lg-10">
<h3 class="fw-bold text-center mb-5">Pricing</h3>
<div class="row gx-xl-5">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div class="card">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Basic</strong>
</p>
<h3 class="mb-4">
<strong>$ 129</strong>
<small class="text-muted" style="font-size: 16px">/year</small>
</h3>
<button type="button" class="btn btn-secondary btn-rounded w-100 mb-3">
Buy
</button>
</div>
<div class="card-body">
<ol class="list-unstyled mb-0">
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Unlimited
updates
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Git repository
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>npm
installation
</li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<div class="card">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Advanced</strong>
</p>
<h3 class="mb-4">
<strong>$ 299</strong>
<small class="text-muted" style="font-size: 16px"
>/year</small
>
</h3>
<button type="button" class="btn btn-primary btn-rounded w-100 mb-3">
Buy
</button>
</div>
<div class="card-body">
<ol class="list-unstyled mb-0">
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Unlimited
updates
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Git repository
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>npm
installation
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Code examples
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Premium
snippets
</li>
</ol>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
<div class="card">
<div class="card-header text-center pt-4">
<p class="text-uppercase">
<strong>Enterprise</strong>
</p>
<h3 class="mb-4">
<strong>$ 499</strong>
<small class="text-muted" style="font-size: 16px"
>/year</small
>
</h3>
<button
type="button"
class="btn btn-secondary btn-rounded w-100 mb-3"
>
Buy
</button>
</div>
<div class="card-body">
<ol class="list-unstyled mb-0">
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Unlimited
updates
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Git repository
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>npm
installation
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Code examples
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Premium
snippets
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Premium
support
</li>
<li class="mb-3">
<i class="fas fa-check text-success me-3"></i>Drag&Drop
builder
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Pricing -->
About author
Michal Szymanski
Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.