<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <span class="heading"> <h3>Premium</h3> </span> <span class="price-value">$192/mo<span class="service">Unlimited</span></span> </div> <div class="pricingTable-sign-up"> <a href="#" class="btn btn-default">Purchase</a> </div> </div> </div> </div> </div>

.pricingTable{ text-align: center; overflow: hidden; } .pricingTable .pricingTable-header{ background: #3F51B5; } .pricingTable .heading{ display: block; padding: 25px 0; } .pricingTable .heading:after { content: ""; width: 28%; border-top: 1px solid #7c888f; display: block; margin: 15px auto 0; } .pricingTable .heading h3{ font-size: 24px; color: #fff; text-transform: uppercase; margin:0; letter-spacing: 2px; } .pricingTable .price-value{ font-size: 55px; color:#fff; padding: 20px 0 40px 0; display: block; } .pricingTable .service{ display: block; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 15px; color: #9E9E9E; } .pricingTable .btn{ display: block; font-size: 22px; background: #8BC34A; border: none; border-radius: 0; padding: 20px 0; text-transform: uppercase; letter-spacing: 1px; } @media screen and (max-width: 990px){ .pricingTable{ margin-bottom: 20px; } }