<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="jumbotron"> <div class="container text-center"> <h1 class="page-header">PRICING PLANS</h1> <p class="lead">choose from our simple and clear plans</p> </div> </div> <div class="container "> <div class="row"> <div class="col-md-4 well pricing-table"> <div class="pricing-table-holder"> <center> <img src="http://www.placehold.it/100X100" class="img-responsive img-circle" alt=""> <h3>PLAN A</h3> <p class="caption"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </center> </div> <div class="custom-button-group" style=""> <div class="col-md-8 col-sm-9" style="padding:0;"> <button type="button" class="btn btn-royal-blue btn-block dropdown-toggle" style="border-radius:0;" data-toggle="dropdown" aria-expanded="false"> Select Bundle <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <div class="col-md-4 col-sm-3" style="padding:0;"> <button class="btn btn-primary btn-block" style="border-radius:0;" > Get It </button> </div> </div> <div class="pricing-feature-list"> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> <div class="price-table-button-holder"> <button class="btn btn-info btn-block"> GET NOW </button> </div> </div> <div class="col-md-4 well pricing-table"> <div class="pricing-table-holder"> <center> <img src="http://www.placehold.it/100X100" class="img-responsive img-circle" alt=""> <h3>PLAN B</h3> <p class="caption"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </center> </div> <div class="custom-button-group" style=""> <div class="col-md-8 col-sm-9" style="padding:0;"> <button type="button" class="btn btn-royal-blue btn-block dropdown-toggle" style="border-radius:0;" data-toggle="dropdown" aria-expanded="false"> Select Bundle <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <div class="col-md-4 col-sm-3" style="padding:0;"> <button class="btn btn-primary btn-block" style="border-radius:0;" > Get It </button> </div> </div> <div class="pricing-feature-list"> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> <div class="price-table-button-holder"> <button class="btn btn-info btn-block"> GET NOW </button> </div> </div> <div class="col-md-4 well pricing-table"> <div class="pricing-table-holder"> <center> <img src="http://www.placehold.it/100X100" class="img-responsive img-circle" alt=""> <h3>PLAN C</h3> <p class="caption"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </center> </div> <div class="custom-button-group" style=""> <div class="col-md-8 col-sm-9" style="padding:0;"> <button type="button" class="btn btn-royal-blue btn-block dropdown-toggle" style="border-radius:0;" data-toggle="dropdown" aria-expanded="false"> Select Bundle <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> <div class="col-md-4 col-sm-3" style="padding:0;"> <button class="btn btn-primary btn-block" style="border-radius:0;" > Get It </button> </div> </div> <div class="pricing-feature-list"> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> <div class="price-table-button-holder"> <button class="btn btn-info btn-block"> GET NOW </button> </div> </div> </div> </div>

body{ font-family: 'Roboto', sans-serif; } center>img{ position: relative; margin-top: -24%; } .well{ background: #fff; box-shadow: 0 0 0 0; border: 0px; } .jumbotron{ background: #fff; } .base-padding{ padding: 3% 0; } .well.pricing-table{ /* padding: 3%;*/ background: #fff; transition:all 0.6s ease-out; } .well.pricing-table:hover{ box-shadow:0 5px 6px #444; cursor:pointer; } .pricing-feature-list{ padding: 10%; background: #444; color: #eee; } .pricing-feature-list .list-group-item { position: relative; display: block; padding: 13px 15px; margin-bottom: -1px; background-color: #444; /* border: 1px solid #6B6B6B; */ font-size: 15px; border: 1px solid #444; /* font-weight: 700; */ border-bottom: 1px solid #595353; } .pricing-table>.pricing-table-holder{ background: #f9f9f9; padding: 6%; } .btn-info{ color: #fff; background-color: #F95353; border-color: #F95353; /* border-radius: 0; */ padding: 3%; transition: all 0.6s ease-in; } .custom-button-group{ background: #f9f9f9; padding: 0%; } .btn-royal-blue{ color: #FFF; background-color: #23A4F2; border-color: #23A4F2; transition: all 0.4s ease-in; } .btn-royal-blue:hover{ color: #eee; transition: all 0.5s ease-in; }