Bootstrap 4 Pricing Table

by mylastof

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container mb-5 mt-5">
  <div class="pricing card-deck flex-column flex-md-row mb-3">
    <div class="card card-pricing text-center px-3 mb-4">
      <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Starter</span>
      <div class="bg-transparent card-header pt-4 border-0">
        <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="15">$<span class="price">3</span><span class="h6 text-muted ml-2">/ per month</span></h1>
      </div>
      <div class="card-body pt-0">
        <ul class="list-unstyled mb-4">
          <li>Up to 5 users</li>
          <li>Basic support on Github</li>
          <li>Monthly updates</li>
          <li>Free cancelation</li>
        </ul>
        <button type="button" class="btn btn-outline-secondary mb-3">Order now</button>
      </div>
    </div>
    <div class="card card-pricing popular shadow text-center px-3 mb-4">
      <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Professional</span>
      <div class="bg-transparent card-header pt-4 border-0">
        <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">$<span class="price">6</span><span class="h6 text-muted ml-2">/ per month</span></h1>
      </div>
      <div class="card-body pt-0">
        <ul class="list-unstyled mb-4">
          <li>Up to 5 users</li>
          <li>Basic support on Github</li>
          <li>Monthly updates</li>
          <li>Free cancelation</li>
        </ul>
        <a href="https://www.totoprayogo.com" target="_blank" class="btn btn-primary...

CSS

.card-pricing.popular {
    z-index: 1;
    border: 3px solid #007bff;
}
.card-pricing .list-unstyled li {
    padding: .5rem 0;
    color: #6c757d;
}