<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container mb-5 mt-5"> <div class="pricing card-deck flex-column flex-md-row mb-3"> <div class="card card-pricing text-center px-3 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Starter</span> <div class="bg-transparent card-header pt-4 border-0"> <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="15">KES <span class="price">100</span><span class="h6 text-muted ml-2"></span></h1> </div> <div class="card-body pt-0"> <ul class="list-unstyled mb-4"> <li>5 SMS Notifications</li> <li>5 Email Notifications</li> <li>No Category</li> <li></li> <li></li> </ul> <button type="button" class="btn btn-outline-secondary mb-3">Order now</button> </div> </div> <div class="card card-pricing popular shadow text-center px-3 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Basic</span> <div class="bg-transparent card-header pt-4 border-0"> <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">KES <span class="price">250</span><span class="h6 text-muted ml-2"></span></h1> </div> <div class="card-body pt-0"> <ul class="list-unstyled mb-4"> <li>100 SMS Notifications</li> <li>100 Email Notifications</li> <li>1 Category</li> <li></li> <li></li> <li></li> </ul> <a href="https://www.totoprayogo.com" target="_blank" class="btn btn-primary mb-3">Order Now</a> </div> </div> <div class="card card-pricing text-center px-3 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Professional</span> <div class="bg-transparent card-header pt-4 border-0"> <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="45">KES <span class="price">1,100</span><span class="h6 text-muted ml-2"></span></h1> </div> <div class="card-body pt-0"> <ul class="list-unstyled mb-4"> <li>300 SMS Notifications</li> <li>300 Email Notifications</li> <li>4 Categories</li> <li></li> <li></li> <li></li> <li></li> </ul> <button type="button" class="btn btn-outline-secondary mb-3">Order now</button> </div> </div> <div class="card card-pricing text-center px-3 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 rounded-bottom bg-primary text-white shadow-sm">Enterprise</span> <div class="bg-transparent card-header pt-4 border-0"> <h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="60">KES <span class="price">6,000</span><span class="h6 text-muted ml-2">/ per month</span></h1> </div> <div class="card-body pt-0"> <ul class="list-unstyled mb-4"> <li>500 SMS Notifications</li> <li>500 Email Notifications</li> <li>10 Categories</li> <br> </ul> <button type="button" class="btn btn-outline-secondary mb-3">Order now</button> </div> </div> </div> </div> <div class="text-muted mt-5 mb-5 text-center small">by : <a class="text-muted" target="_blank" href="http://totoprayogo.com">totoprayogo.com</a></div>

.btn-primary{ background-color: #40A9F4; border-color: #40A9F4; } .card-pricing.popular { z-index: 1; border: 3px solid #007bff; } .card-pricing .list-unstyled li { padding: .5rem 0; color: #6c757d; } .card-pricing.popular { z-index: 1; border: 3px solid #40A9F4; } .bg-primary { background-color: #40A9F4!important; } .text-primary { color: #40A9F4 !important; } .h1, h1 { font-size: 2.1rem; }