<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
External JavaScript
This Pen doesn't use any external JavaScript resources.