<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="comment-tabs"> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#monthly" role="tab" data-toggle="tab">Monthly</a></li> <li><a href="#annual" role="tab" data-toggle="tab">Annual</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="monthly"> <!-- price table --> <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 first recommended"> <div class="head"> <h2>Standard</h2> </div> <ul class="item-list"> <li> 1-10 Bankruptcies</li> </ul> <div class="price"> <h3> <span class="symbol">$</span>75 <br /><small>per month</small></h3> </div> </div> </div> <div class="col-sm-3 col-md-2 col-lg-2"> <div class="plan recommended"> <div class="head"> <h2>Plus</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> </div> <div class="col-sm-3 col-md-2 col-lg-2"> <div class="plan last recommended"> <h2>Enterprise</h2> <ul class="item-list"> <li> 26+ Bankruptcies <br /> per month </li> <li> <strong>Call us:</strong></li> <li> <strong>866.218.1003</strong> </li> </ul> </div> </div> </div> <!-- row--> </div> <!-- pricing-tables --> </div> </div> <div class="tab-pane" id="annual"> <p> wow </p> </div> </div> </div>

.tab-content { border: 1px solid #ddd; border-top: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .nav-tabs li a{ margin-right:-398px; margin-left:407px; padding:1px 42px; } /* pricing table */ .pricing-tables { } .pricing-tables h1 { font-size: 48px; } .pricing-tables .plan.first { border-bottom-left-radius: 4px; border-top-left-radius: 4px !important; } .pricing-tables .plan.last { border-bottom-right-radius: 4px; border-top-right-radius: 4px; } .pricing-tables .plan.recommended { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .pricing-tables .plan.recommended .head { /*margin-bottom: 20px;*/ border-top-left-radius: 4px; border-top-right-radius: 4px; } .pricing-tables.attached .col-sm-4, .pricing-tables.attached .col-md-4, .pricing-tables.attached .col-sm-3, .pricing-tables.attached .col-md-3 { padding-left: 0; padding-right: 0; } .pricing-tables.attached .plan { border-radius: 0; } .pricing-tables.attached .plan .head { border-radius: 0; } /*.pricing-tables.attached .plan.recommended { border-radius: 4px; }*/ /*.pricing-tables.attached .plan.recommended .head { border-top-left-radius: 4px; border-top-right-radius: 4px; }*/ .pricing-tables.attached .plan.last { border-bottom-right-radius: 4px; } .pricing-tables.attached .plan.last .head { border-top-right-radius: 4px; } .pricing-tables.attached .plan.first { border-bottom-left-radius: 4px; } .pricing-tables.attached .plan.first .head { border-top-left-radius: 4px; } .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 ul li { line-height: 22px; margin-bottom: 15px; font-size: 19px; font-weight: 400; } .plan ul li a { text-decoration: underline; color: #e6e9ed; } .plan ul li:last-child { border-bottom: none; } .plan ul strong { font-weight: 700; } .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; } }