Create a pricing section with three cards

Description: Build three pricing cards in one row (stacked on phones). Each has a title, a price, a list of features and a button. The middle card must be highlighted.

Hint:

• Use row row-cols-1 row-cols-md-3, card, list-unstyled and border-primary.

---

Solution

<div class="container">
  <div class="row row-cols-1 row-cols-md-3 g-3 text-center">
    <div class="col">
      <div class="card h-100">
        <div class="card-header"><h3 class="h5 my-1">Free</h3></div>
        <div class="card-body">
          <p class="card-title display-6">$0<small class="fs-6 text-body-secondary"> / month</small></p>
          <ul class="list-unstyled mt-3 mb-4"><li>1 project</li><li>Basic support</li></ul>
          <button type="button" class="btn btn-outline-primary w-100">Sign up</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 border-primary">
        <div class="card-header text-bg-primary"><h3 class="h5 my-1">Pro</h3></div>
        <div class="card-body">
          <p class="card-title display-6">$15<small class="fs-6 text-body-secondary"> / month</small></p>
          <ul class="list-unstyled mt-3 mb-4"><li>10 projects</li><li>Email support</li></ul>
          <button type="button" class="btn btn-primary w-100">Get started</button>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <div class="card-header"><h3 class="h5 my-1">Business</h3></div>
        <div class="card-body">
          <p class="card-title display-6">$49<small class="fs-6 text-body-secondary"> / month</small></p>
          <ul class="list-unstyled mt-3 mb-4"><li>Unlimited projects</li><li>Phone support</li></ul>
          <button type="button" class="btn btn-outline-primary w-100">Contact us</button>
        </div>
      </div>
    </div>
  </div>
</div>

How it works

• row-cols-md-3 makes three equal columns from the md breakpoint, and h-100 makes the cards the same height.
• The Pro card is highlighted with border-primary and a colored header.

Read Cards and Grid: Gutters, Offset and Order.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.