<section>
<div class="container py-5">
<h1 class="text-center pricing">Bootstrap pricing table</h1> <br>
<div class="row text-center align-items-end">
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="bg-white p-5 rounded-lg shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-4">Basic</h1>
<h2 class="h1 font-weight-bold">$9<span class="text-small font-weight-normal ml-2">/ month</span></h2>
<div class="custom-separator my-4 mx-auto bg-warning"></div>
<ul class="list-unstyled my-5 text-small text-left">
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 5GB Disk Space</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 10 Email Accounts</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 5 GB Monthly Bandwidth</li>
<li class="mb-3 text-muted"> <i class="fa fa-times mr-2"></i> <del>Unlimited Subdomain</del> </li>
<li class="mb-3 text-muted"> <i class="fa fa-times mr-2"></i> <del>Automatic Cloud Backup</del> </li>
</ul> <a href="#" class="btn btn-warning btn-block p-2 shadow rounded-pill">Subscribe</a>
</div>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="bg-white p-5 rounded-lg shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-4">Pro</h1>
<h2 class="h1 font-weight-bold">$19<span class="text-small font-weight-normal ml-2">/ month</span></h2>
<div class="custom-separator my-4 mx-auto bg-warning"></div>
<ul class="list-unstyled my-5 text-small text-left font-weight-normal">
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 10GB Disk Space</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 15 Email Accounts</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 10GB Monthly Bandwidth</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> Unlimited Subdomain</li>
<li class="mb-3"> <i class="fa fa-times mr-2"></i> <del>Automatic Cloud Backup</del></li>
</ul> <a href="#" class="btn btn-warning btn-block p-2 shadow rounded-pill">Subscribe</a>
</div>
</div>
<div class="col-lg-4">
<div class="bg-white p-5 rounded-lg shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-4">Enterprise</h1>
<h2 class="h1 font-weight-bold">$29<span class="text-small font-weight-normal ml-2">/ month</span></h2>
<div class="custom-separator my-4 mx-auto bg-warning"></div>
<ul class="list-unstyled my-5 text-small text-left font-weight-normal">
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 15GB Disk Space </li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 15 Email Accounts </li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 15GB Monthly Bandwidth</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> Unlimited Subdomains</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> Automatic Cloud Backup</li>
</ul> <a href="#" class="btn btn-warning btn-block p-2 shadow rounded-pill">Subscribe</a>
</div>
</div>
</div>
</div>
</section>
.rounded-lg {
border-radius: 1rem !important
}
.text-small {
font-size: 0.9rem !important
}
.pricing {
color: #fff
}
.custom-separator {
width: 5rem;
height: 6px;
border-radius: 1rem
}
.text-uppercase {
letter-spacing: 0.2em
}
.btn-warning {
color: #fff
}
.btn-warning:hover {
color: #fff
}
body {
background: #f8c246;
background: -webkit-linear-gradient(to right, #f8c246, #f8c246);
background: linear-gradient(to right, #f8c246, #f8c246);
color: #514B64;
min-height: 150vh
}