Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

Cards

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 card
  • card-title and card-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.

Fissure in Sandstone
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.

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Button
2 days ago
<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>
Note:Cards have tons of available options. We won't cover it all in this lesson, because we have to finish our project. However, if you want to learn more about card have a look at cards documentation page.
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

  1. Unlimited updates
  2. Git repository
  3. 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&amp;Drop
              builder
            </li>
          </ol>
        </div>
      </div>

    </div>
  </div>

</section>
<!-- Section: Pricing -->
Demo and source code for this lesson
John Doe

About author

Michal Szymanski
@ascensus_mdb

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.