"Pricing table color"
Bootstrap 3.3.0 Snippet by aswanik11

<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-sm-4"> <div class="mega-pricing-item gradient-style-1"> <div class="pricing-icon"> <i class="fa fa-heart-o"></i> </div> <h3><strong>Basic</strong> Plan</h3> <ul> <li><strong>Manage</strong> tasks</li> <li><strong>Sync</strong> notes</li> <li><strong>Set</strong> deadline</li> </ul> <h1><span>$</span>100</h1> <p class="pricing-duration">Per month</p> <a href="http://bootstraptema.ru/stuff/snippets_bootstrap/prices/jarkie_prajsy_tarifov/26-1-0-2006" class="bordered-btn">Buy now</a> </div> </div> <div class="col-sm-4"> <div class="mega-pricing-item gradient-style-2 active"> <div class="pricing-icon"> <i class="fa fa-plane"></i> </div> <h3><strong>Advance</strong> Plan</h3> <ul> <li><strong>Manage</strong> tasks</li> <li><strong>Sync</strong> notes</li> <li><strong>Another</strong> item</li> <li><strong>Set</strong> deadline</li> </ul> <h1><span>$</span>200</h1> <p class="pricing-duration">Per month</p> <a href="http://bootstraptema.ru/stuff/snippets_bootstrap/prices/jarkie_prajsy_tarifov/26-1-0-2006" class="boxed-btn">Buy now</a> </div> </div> <div class="col-sm-4"> <div class="mega-pricing-item gradient-style-3"> <div class="pricing-icon"> <i class="fa fa-grav"></i> </div> <h3><strong>Mega</strong> Plan</h3> <ul> <li><strong>Manage</strong> tasks</li> <li><strong>Sync</strong> notes</li> <li><strong>Another</strong> item</li> <li><strong>Second</strong> option</li> <li><strong>Set</strong> deadline</li> </ul> <h1><span>$</span>300</h1> <p class="pricing-duration">Per month</p> <a href="http://bootstraptema.ru/stuff/snippets_bootstrap/prices/jarkie_prajsy_tarifov/26-1-0-2006" class="bordered-btn">Buy now</a> </div> </div> </div><!-- ./row --> </div><!-- ./container -->
/* demo background */ body{background: #fff} /* style pricing */ .mega-pricing-item { background: #fff none repeat scroll 0 0; box-shadow: 0 0 10px #f1f1f1; padding: 30px; text-align: center; } .bordered-btn { border: 1px solid; color: #fff; display: inline-block; font-weight: 700; padding: 10px 30px; text-transform: uppercase; } .bordered-btn { border-radius: 3px; } .bordered-btn:hover { color: #fff; background-color: #1360f4; border-color: #1360f4; text-decoration:none} .boxed-btn { display: inline-block; font-weight: 600; text-transform: uppercase } .boxed-btn { border-radius: 2px; font-size: 14px; margin-top: 15px; padding: 10px 30px; color: #fff } .boxed-btn:hover{ background-color: #333; color: #fff; text-decoration:none } .mega-pricing-item ul { line-height: 35px; list-style: outside none none; margin: 0; min-height: 198px; padding: 0; } .mega-pricing-item a.boxed-btn { margin: 0; } .mega-pricing-item h1 { font-size: 55px; font-weight: 300; } .mega-pricing-item h1 span { font-size: 25px; padding-right: 3px; } .mega-pricing-item h3 { font-size: 25px; font-weight: 300; } .gradient-style-1 { background: #e62f17; background: -webkit-linear-gradient(45deg, #e62f17 0%, #f2ba30 100%); background: linear-gradient(45deg, #e62f17 0%, #f2ba30 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e62f17', endColorstr='#f2ba30', GradientType=1); } .gradient-style-2 { background: #0a3466; background: -webkit-linear-gradient(45deg, #0a3466 0%, #17b6e3 100%); background: linear-gradient(45deg, #0a3466 0%, #17b6e3 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0a3466', endColorstr='#17b6e3', GradientType=1); } .gradient-style-3 { background: #18b9e5; background: -webkit-linear-gradient(45deg, #18b9e5 0%, #81d9b8 100%); background: linear-gradient(45deg, #18b9e5 0%, #81d9b8 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#18b9e5', endColorstr='#81d9b8', GradientType=1); } .gradient-style-1, .gradient-style-2, .gradient-style-3 { color: #fff; box-shadow: 0 0 10px #ccc } .pricing-icon { font-size: 80px; line-height: 80px; margin-bottom: 20px; } .gradient-style-1 a, .gradient-style-2 a, .gradient-style-3 a { background-color: transparent; border: 1px solid #fff; color: #fff; } .pricing-duration { margin-top: -15px; margin-bottom: 15px; font-size: 12px; } .mega-pricing-item.flat-style-pricing { border: 1px solid #f7f9fc; box-shadow: 0 0 0; } .mega-pricing-item.flat-style-pricing.active { border-top: 3px solid; box-shadow: 0 0 10px #f1f1f1; } .mega-pricing-item h3 span { display: block; font-size: 14px; line-height: 20px; }

Related: See More


Questions / Comments: