<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 ----------> <section> <div class="col-centered col-lg-12"> <div class="pricing-tables attached "> <div class="row "> <div class="col-sm-3 col-md-2 col-lg-2"> <div class="plan recommended"> <div class="head"> <h2>ANALYST</h2> </div> <ul class="item-list"> <li> 11-25 Bankruptcies</li> </ul> <div class="price"> <h3> <span class="symbol">$</span>100 <br /><small>per month</small></h3> </div> <div class="btn btn-success"> <span class="text-info">Upgrade Now</span> </div> </div> </div> </div> <!-- row--> </div> <!-- pricing-tables --> </div> <br> </section>

/* pricing table */ .plan { box-shadow: 0 2px 2px rgba(10, 10, 10, 0.30) !important; min-height: 100px; background: #fff; border-radius: 4px; margin: 20px 0; padding-bottom: 25px; text-align: center; width:300px; margin-left:10%; background-color:gainsboro; } .plan .head { border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 12px 16px; background: #922a8d; color: #fff; } .plan .head h1, .plan .head h2, .plan .head h3 { padding: 0; margin: 0; font-weight: 100; } .plan .price { margin: 0 auto 30px auto; width: 80%; } .plan .price h3 { font-size: 60px; vertical-align: top; font-weight:300; line-height:0.6; border-radius:100%; padding-top:61px; padding-bottom:95px; padding-left:10px; border:solid 1px white; color:white; } .plan .price h3 span { font-size: 38px; vertical-align: top; position: relative; margin: 6px 0 0 -7px; display: inline-block; } .plan .price h3 small{ font-weight:200; color:white; font-size:25px; line-height:0.6; } .plan .price h4 { color: #aaa; font-size: 14px; } .plan .btn { padding: 10px 30px; text-transform: uppercase; font-weight: 500; } .plan ul { list-style-type: none; padding: 20px; margin-top: 2px; } .plan.recommended { margin-top: 6px; box-shadow: 0 0 22px rgba(10, 10, 10, 0.42); position: relative; z-index: 99; border-radius: 4px; } .plan.recommended .head { border-top-left-radius: 4px; border-top-right-radius: 4px; background: #922a8d; } .head.value{ background-color: #fdaf17; /*margin-bottom: 48px;*/ } .plan.last.recommended{ margin-left:10%; padding-top:38px; padding-left:30px; padding-right:30px; padding-bottom:15%; border:solid 1px; width:300px; } @media screen and (min-width:770px) and (max-width:990px){ .plan .mediafix h3 { width:25% font-size: 55px !important; vertical-align: top; line-height: 1; } }