Cards

See Bootstrap docs
Basic card
Card Header
Special card title

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

Go somewhere
<div class="card shadow-light">
  <div class="card-header">
    Card Header
  </div>
  <div class="card-body">
    <h5 class="card-title">Special card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-purple shadow-light-sm mt-2">Go somewhere</a>
  </div>
</div>
Pricing charts
Beginner
$ 29 /mo
3 Collaborators
10 Projects
1GB data storage
3% Transaction fee
Start your trial
Professional
$ 79 /mo
10 Collaborators
30 Projects
5GB data storage
Exclusive Support
1.5% Transaction fee
Choose this plan
Enterprise
$ 109 /mo
Unlimited collaborators
Unlimited projects
50GB data storage
VIP Support
No license needed
No transaction fee
Contact sales
<div class="row">
  <div class="col-xl-4">
    <div class="card shadow-light-sm">
      <div class="card-body">
        <h5 class="text-center">
          Beginner
        </h5>
        <div class="d-flex justify-content-center">
          <span class="h3 align-self-center mb-0">$</span>
          <span class="display-3">29</span>
          <span class="h4 align-self-end mb-3">/mo</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">3 Collaborators</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">10 Projects</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">1GB data storage</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">3% Transaction fee</span>
        </div>
        <a href="#" class="btn btn-pastel-primary d-block btn-lg hover-lift-light mt-5">
          Start your trial
        </a>
      </div>
    </div>
  </div>

  <div class="col-xl-4 mt-4 mt-xl-0">
    <div class="card shadow-light-sm">
      <div class="card-body">
        <h5 class="text-center">
          Professional
        </h5>
        <div class="d-flex justify-content-center">
          <span class="h3 align-self-center mb-0">$</span>
          <span class="display-3">79</span>
          <span class="h4 align-self-end mb-3">/mo</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">10 Collaborators</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">30 Projects</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">5GB data storage</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">Exclusive Support</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">1.5% Transaction fee</span>
        </div>
        <a href="#" class="btn btn-primary d-block btn-lg hover-lift-light mt-5">
          Choose this plan
        </a>
      </div>
    </div>
  </div>

  <div class="col-xl-4 mt-4 mt-xl-0">
    <div class="card shadow-light-sm">
      <div class="card-body">
        <h5 class="text-center">
          Enterprise
        </h5>
        <div class="d-flex justify-content-center">
          <span class="h3 align-self-center mb-0">$</span>
          <span class="display-3">109</span>
          <span class="h4 align-self-end mb-3">/mo</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">Unlimited collaborators</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">Unlimited projects</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">50GB data storage</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">VIP Support</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">No license needed</span>
        </div>
        <div class="d-flex align-items-center mt-3">
          <i class="far fa-check-circle text-success"></i>
          <span class="ms-2">No transaction fee</span>
        </div>
        <a href="#" class="btn btn-pastel-primary d-block btn-lg hover-lift-light mt-5">
          Contact sales
        </a>
      </div>
    </div>
  </div>
</div>