Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Gradient Bootstrap Pricing Table"
Bootstrap 3.3.0 Snippet by
jpknegtel
3.3.0
Preview
HTML
CSS
View Full Screen
Forked from
Fork
Fork this
Parent
632
 
0 Fav
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 ----------> <section id="bs-pricing-five" class="bs-pricing-five p-top-100 bg-white"> <div class="container"> <div class="section-content"> <h1 class="section-header">Our pricing is all P/M </h1> <h3>As you move along, you get all the features of the previous boxes</h3> </div> <div class="row"> <div class="bs-five-area bs-radius"> <div class="col-md-3 no-padding"> <div class="bs-five"> <h6 class="text-uppercase">Free</h6> <h1 class="bs-caption"><sup>€</sup>0</h1> <p><b>For Startups</b></p> <hr> <ul> <li><b>Access to basic data</b></li> <li>Limited filters</li> <li>Weekly digest</li> <li> </li> </ul> <a href="#0" class="btn btn-success btn-round m-top-40">Signup now</a> </div> </div> <div class="col-md-3 no-padding"> <div class="bs-five active"> <h6 class="text-uppercase">Premium</h6> <h1 class="bs-caption"><sup>€</sup>200</h1> <p><b>Single seat</b></p> <hr> <ul> <li><b>All data & filters</b></li> <li><b>CSV export</b></li> <li>Growth signals</li> <li>Customer Support</li> </ul> <a href="#0" class="btn btn-success btn-round m-top-40">Free trial</a> </div> </div> <div class="col-md-3 no-padding"> <div class="bs-five"> <h6 class="text-uppercase">Premium Plus</h6> <h1 class="bs-caption"><sup>€</sup>350</h1> <p><b>For VC teams</b></p> <hr> <ul> <li><b>All other features </b></li> <li>4 custom reports a year</li> <li>Add seats for + 50</li> <li>Priority Customer Support</li> </ul> <a href="#0" class="btn btn-success btn-round m-top-40">Free trial</a> </div> </div> <div class="col-md-3 no-padding"> <div class="bs-five"> <h6 class="text-uppercase">Business</h6> <h1 class="bs-caption"><sup>€</sup>1000</h1> <p><b>For large companies</b></p> <hr> <ul> <li><b>API access</b></li> <li>Reports upon request</li> <li>Custom search</li> <li>Priority Customer Support</li> </ul> <a href="#0" class="btn btn-success btn-round m-top-40">Contact us</a> </div> </div> </div> </div> </div> </section> <div style="text-align: center;margin-top: 150px; margin-bottom:100px"> | <a href="http://bootstrapthemes.co/"target="_blank"> Snippet By Bootstrapthemes.co </a> |</div>
/* Author: Bootstrapthemes Author URI: http://bootstrapthemes.co */ /* ========================================================================== Author's custom styles ========================================================================== */ .p-top-100{ padding:100px 0; } .m-top-40{ margin-top: 40px; } .section-content{ text-align: center; } /*================================================= Pricint fiv ===================================================*/ .bs-five-area{ width:100%; display: inline-block; box-shadow: 0px 0px 6px 0px #ddd; overflow: hidden; position: relative; font-family: 'Open Sans', sans-serif; text-align: center; } .bs-five-area.bs-radius{ border-radius: 30px; } .bs-five-area > div{ padding:0; } .bs-five-area .bs-five{ position: relative; width: 100%; margin: auto; transition: all 0.4s; padding:20px 0px; } .bs-five-area .bs-five h6{ font-weight: 700; letter-spacing: 2px; } .bs-five-area .bs-five h1{ font-size:64px; font-weight: 100; line-height: 72px; } .bs-five-area .bs-five h1 sup{ font-size:30px; top:-30px; } .bs-five-area .bs-five ul { margin:0; padding:0; list-style: none; } .bs-five-area .bs-five ul li{ line-height: 45px; border-bottom:0px; } .bs-five-area .bs-five:hover{ background: #92C1E0; transition: all 0.4s; } .bs-five-area .bs-five.active { background: #179880; background: -webkit-linear-gradient(left, #92C1E0 , #6AABD5); background: -o-linear-gradient(right, #92C1E0, #6AABD5); background: -moz-linear-gradient(right, #92C1E0, #6AABD5); background: linear-gradient(to right, #92C1E0 , #6AABD5); } .bs-five-area .bs-five .btn-success{ padding: 10px 50px; display: inline-block; border-radius: 30px; background-color: #6AABD5; border-color: #6AABE5; } .bs-five-area .bs-five.active .btn.btn-success, .bs-five-area .bs-five:hover.bs-five .btn.btn-success{ background: #6AABD5 ; color:#444 ; } .bs-five-area .bs-five.active, .bs-five-area .bs-five.active ul li, .bs-five-area .bs-five:hover.bs-five, .bs-five-area .bs-five:hover.bs-five ul li { color:#fff; } /*copyright ==================*/ .footer{ background-color: #333; } .copyright{ padding: 20px 10px; } .copyright p { font-size:12px; color:#fff; } .copyright p i { padding: 0px 5px; color: red; } .copyright p a { padding: 0px 5px; color: yellow; }
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76