<!-- =========================================================
 ----------- Bootstrap Pricing Cards -------------------------
 ========================================================= -->
<section>
  <h1>Bootstrap 4 Pricing Table</h1>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-3">
        <div class="card">
          <div class="card-body">
            <div class="plan-name">
              Lite </div>
            <div class="plan-description">
              <div class="plan-price month">
                $19<sub> / month</sub></div>
              <p>Great for personal users and the self-employed who are considering analytics and need branding.</p>
            </div>
            <div class="plan-description specs">

              1,000 Branded Links<br> 1+ User Seats<br> 1+ Custom Domains </div>
            <div class="plan-cta">
              <p><a class="button" href="#" data-open="get-pro-modal" aria-controls="get-pro-modal" aria-haspopup="true" tabindex="0">Get Started</a></p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-3">
        <div class="card">
          <div class="card-body">
            <div class="plan-name">
              Basic </div>
            <div class="plan-description">
              <div class="plan-price month">
                $29<sub> / month</sub></div>
              <p>Great for personal users and the self-employed who are considering analytics and need branding.</p>
            </div>
            <div class="plan-description specs">

              5,000 Branded Links<br> 3+ User Seats<br> 5+ Custom Domains </div>
            <div class="plan-cta">
              <p><a class="button" href="#" data-open="get-pro-modal" aria-controls="get-pro-modal" aria-haspopup="true" tabindex="0">Get Started</a></p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-3">
        <div class="card">
          <div class="card-body">
            <div class="plan-name">
              Pro </div>
            <div class="plan-description">
              <div class="plan-price month">
                $99<sub> / month</sub></div>
              <p>Great for personal users and the self-employed who are considering analytics and need branding.</p>
            </div>
            <div class="plan-description specs">

              20,000 Branded Links<br> 10+ User Seats<br> 10+ Custom Domains </div>
            <div class="plan-cta">
              <p><a class="button" href="#" data-open="get-pro-modal" aria-controls="get-pro-modal" aria-haspopup="true" tabindex="0">Get Started</a></p>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-3">
        <div class="card">
          <div class="card-body">
            <div class="plan-name">
              Company </div>
            <div class="plan-description">
              <div class="plan-price month">
                $399<sub> / month</sub></div>
              <p>Great for personal users and the self-employed who are considering analytics and need branding.</p>
            </div>
            <div class="plan-description specs">

              100,000 Branded Links<br> 50+ User Seats<br> 50+ Custom Domains </div>
            <div class="plan-cta">
              <p><a class="button" href="#" data-open="get-pro-modal" aria-controls="get-pro-modal" aria-haspopup="true" tabindex="0">Get Started</a></p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  <!-- ./container-->
</section>


  <section>
    <div class="container pt-4 text-center">
      <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fewebdesigns%2F&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="450" height="80" style="border:none;overflow:hidden"></iframe>
    </div>
  </section>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap");

body {
  background: #eee;
  padding: 40px 0;
}
h1 {
  text-align: center;
  padding-bottom: 30px;
  font-family: Montserrat;
  font-weight: 700;
  color: #323232;
}

.card {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.03);
  border-right: 1px #dde0e2 solid;
  border-radius: 4px 4px 0 0;
  position: relative;
  background-color: white;
  color: #56575b;
  margin: 5px 0;

  .plan-name {
    padding: 13px 0;
    border-bottom: 1px #eff0f2 solid;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    color: #464c50;
    font-family: "Open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
  }

  .plan-description {
    padding: 15px;
    line-height: normal;
    min-height: 175px;
    font-size: 14px;
    line-height: 18px;
  }

  .plan-price sub {
    text-transform: none;
    font-size: 16px;
    bottom: 0;
  }

  .plan-price {
    color: #56575b;
    font-family: "Open sans";
    font-size: 34px;
    text-transform: uppercase;
    line-height: 50px;
  }

  sub {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  .plan-description.specs {
    min-height: 200px;
    line-height: 20px;
  }

  .plan-cta {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 0 15px;
    min-height: 95px;
    &:hover a {
      opacity: 0.8;
      color: #fff;
      text-decoration: none;
    }
  }
  .button,
  .button-primary {
    background: #2a5bd7;
    border-radius: 8px;
    font-size: inherit;
    color: white;
    transition: background 100ms linear;
    text-decoration: none;
    line-height: normal;
    outline: none !important;
    padding: 0.6em 1em;
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js