<body>
<nav class="navbar navbar-light mynavbar">
  <a class="navbar-brand" href="#"> Bootstrap </a>
  <ul class="nav ml-auto">
    <li class="nav-item"><a href="#" class="nav-link">Features</a> </li>
    <li class="nav-item"><a href="#" class="nav-link">Enterprise</a> </li>
    <li class="nav-item"><a href="#" class="nav-link">Support</a> </li>
    <li class="nav-item"><a href="#" class="nav-link">Pricing</a> </li>
  </ul>
  <span class="navbar-text">
    <button class="btn btn-outline-primary">
      Sign up </button>
  </span>
</nav>
<header>
  <div class="row row-header justify-content-center">
    <span class="display-4">Pricing</span>
    <p class="mt-1 lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
  </div>
</header>
<div class="container">
  <div class="row card-groups">
    <div class="col-sm-4">
      <div class="card">
        <div class="card-header">
          Free</div>
        <div class="card-body">
          <h1 class="d-inline-block">$0</h1> <span class="lead rate"> / mo</span>
          <ul>
            <li>10 users include</li>
            <li>2 GB of storage</li>
            <li>Email support</li>
            <li>Help Center access</li>
          </ul>
          <button class="btn btn-lg btn-outline-primary btn-block" type="button">Sign up for free</button>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card">
        <div class="card-header">
          Pro</div>
        <div class="card-body">
          <h1 class="d-inline-block">$15</h1> <span class="lead rate"> / mo</span>
          <ul>
            <li>20 users include</li>
            <li>10 GB of storage</li>
            <li>Priority Email support</li>
            <li>Help Center access</li>
          </ul>
          <button class="btn btn-lg btn-primary btn-block" type="button">Get started</button>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card">
        <div class="card-header">
          Enterprise</div>
        <div class="card-body">
          <h1 class="d-inline-block">$29</h1> <span class="lead rate"> / mo</span>
          <ul>
            <li>30 users include</li>
            <li>15 GB of storage</li>
            <li>Phone and Email support</li>
            <li>Help Center access</li>
          </ul>
          <button class="btn btn-lg btn-primary btn-block" type="button">Contact us</button>
        </div>
      </div>
    </div>
  </div>
  <hr>
</div>
<footer class="footer">
  <div class="row">
    <div class="offset-2 col-5 col-sm">
      <h3>Features</h3>
      <ul class="navbar-dark">
        <li><a href="#">Cool stuff</a></li>
        <li><a href="#">Random features</a></li>
        <li><a href="#">Team feature</a></li>
        <li><a href="#">Stuff for developers</a></li>
        <li><a href="#">Another one</a></li>
        <li><a href="#">Last time</a></li>
      </ul>
    </div>
        <div class="col-5 col-sm">
      <h3>Resources</h3>
      <ul class="navbar-dark">
        <li><a href="#">Resource</a></li>
        <li><a href="#">Resource name</a></li>
        <li><a href="#">Another resource</a></li>
        <li><a href="#">Final resource</a></li>
      </ul>
    </div>
        <div class="offset-2 offset-sm-0 col-12 col-sm">
      <h3>About</h3>
      <ul class="navbar-dark">
        <li><a href="#">Team</a></li>
        <li><a href="#">locations</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
      </ul>
    </div>
    </body>
body
{
  background-color: #ffffff;
}
.mynavbar
{
  border-bottom: 1px solid grey;
}
.mynavbar .nav-link
{
  color: black;
}
.mynavbar .nav-link:hover
{
  text-decoration: underline;
}
header
{
  margin-top: 60px;
}
.row-header
{
  width: 70%;
  margin: 0px auto;
  text-align: center;
}
.card-groups
{
  text-align: center;
  min-height: 350px;
  margin-top: 20px;
}
.card-header
{
  font-size:24px;
  background-color: grey;
  color: floralwhite;
}
.card ul
{
  list-style:none;
  padding: 0;
}
.card ul li
{
  margin: 2px 0;
}
.rate
{
  font-size: 32px;
}
.footer ul
{
  list-style: none;
  padding: 0;
}
.footer ul a
{
  color: #aaa;
}
@media (max-width: 536px) {
  .navbar, .nav {
    justify-content: center;
  }
  .card {
    margin: 10px 0;
  }
}

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.