"cool responsive pricing table "
Bootstrap 3.3.0 Snippet by shihab - Being Zero

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>subscribe</title> <link href='http://fonts.googleapis.com/css?family=Roboto:300italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/style.css"> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> </head> <body> <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-3 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> --> <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><b>PLAN A</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 BUNDEL <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> <hr> <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="wrp" style="box-shadow:-22px 17px 6px rgba(178, 171, 171, 0.39)"> <div class="pricing-table-holder"> <center> <img src="http://www.placehold.it/100X100" class="img-responsive img-circle" alt=""> <h3><b>PLAN B</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 BUNDEL <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> <hr> <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 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><b>PLAN C</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 BUNDEL <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> <hr> <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> </html>
body{ font-family: 'Roboto', sans-serif; } center>img{ position: relative; margin-top: -24%; transition: all 1.5s ease-out; } p.caption{ letter-spacing: 0.15em; } .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.4s ease-in; } .well.pricing-table:hover{ box-shadow:-22px 17px 6px rgba(178, 171, 171, 0.39); transition:all 1s ease-in; } .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; color: #eee; /* font-weight: 700; */ } .pricing-table .pricing-table-holder{ /* background: #f9f9f9;*/ background: url('https://photos-1.dropbox.com/t/2/AACCPJ9m57rbGWc_MCafZdl_PJ_Obe5RT5h6vCC2AgVd_A/12/21457980/jpeg/32x32/3/_/1/2/cyan-pentagonal-background.jpg/CLzYnQogASACIAMoAQ/R7WUFO9GypFsA2Vky1-Q8oSfizbkYKau5N9LHpAUtq0?size=1280x960') center center ; background-size: cover; padding: 6%; } .pricing-table .pricing-table-holder h3,.pricing-table .pricing-table-holder p{ color: #eee; } .btn-info{ color: #fff; background-color: #E57575; 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; }

Related: See More

Material Dashboard Pro React
BS4 Simple & Clean Pricing table
Cool Navigation Bar
Bootstrap Tabs with Table

Questions / Comments: