Pro Bootstrap Pricing Table

by Grobbert

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/css/materialdesignicons.css" rel="stylesheet">
<div class="container">
	<div class="row justify-content-center text-center">
		<div class="col-lg-12">
			<h2 class="font-weight-light">Our Pricing Plan</h2>
			<p class="text-muted mt-4 title-subtitle mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna, dignissim nec auctor in leo.</p>
		</div>
	</div>                
	<div class="row">
		<div class="col-lg-4">
			<div class="bg-white mt-3 price-box">
				<div class="pricing-name text-center">
					<h4 class="mb-0">Personal</h4>
				</div>
				<div class="plan-price text-center mt-4">
					<h1 class="text-custom font-weight-normal mb-0">$9<span>/Month</span></h1>
				</div>
				<div class="price-features mt-5">
					<p><i class="mdi mdi-check"></i> Bandwidth: <span class="font-weight-bold">1GB</span></p>
					<p><i class="mdi mdi-check"></i> Onlinespace: <span class="font-weight-bold">1GB</span></p>
					<p><i class="mdi mdi-close"></i> Support: <span class="font-weight-bold">No</span></p>
					<p><i class="mdi mdi-check"></i> Domain: <span class="font-weight-bold">1</span></p>
					<p><i class="mdi mdi-check"></i> Hidden Fees: <span class="font-weight-bold">No</span></p>
				</div>
				<div class="text-center mt-5">
					<a href="#" class="btn btn-custom text-white">Join Now</a>
				</div>
			</div>
		</div>
		<div class="col-lg-4">
			<div class="bg-white mt-3 price-box">
				<div class="pricing-name...

CSS

body{
    background-color: #f8f9fa!important;
    margin-top:20px;
}

.text-custom,
.navbar-custom .navbar-nav li a:hover,
.navbar-custom .navbar-nav li a:active,
.navbar-custom .navbar-nav li.active a,
.service-box .services-icon,
.price-features p i,
.faq-icon,
.social .social-icon:hover {
    color: #f6576e !important;
}

.bg-custom,
.btn-custom,
.timeline-page .timeline-item .date-label-left::after,
.timeline-page .timeline-item .duration-right::after,.back-to-top:hover {
    background-color: #f6576e;
}

.btn-custom,
.custom-form .form-control:focus,
.social .social-icon:hover,
.registration-input-box:focus {
    border-color: #f6576e;
}

.service-box .services-icon,
.price-features p i {
    background-color: rgba(246, 87, 110, 0.1);
}

.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.btn-custom.focus,
.btn-custom:active,
.btn-custom:focus,
.btn-custom:hover,
.open > .dropdown-toggle.btn-custom {
    border-color: #e45267;
    background-color: #e45267;
}


.price-box {
    padding: 40px 50px;
}

.plan-price h1 span {
    font-size: 16px;
    color: #000;
}

.price-features p i {
    height: 20px;
    width: 20px;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    border-radius: 50%;
    margin-right: 20px;
}

/* Credit to https://www.bootdey.com/snippets/view/bs4-light-our-pricing-page */