"pricing table"
Bootstrap 3.0.3 Snippet by neutrinod

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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> <head> <title>Flat Pricing Table</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap 3.0 CSS File --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- Font Awesome CSS File --> <link href="css/font-awesome.min.css" rel="stylesheet"> <!-- Google Webfonts --> <!-- You do not need to include Arvo font CSS to use the pricing table. It used for demo purpose only --> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'> <link href="demo.css" rel="stylesheet"> <!-- Flat Pricing table --> <link href="css/pricing-table-global.css" rel="stylesheet"> <!-- OR <link href="css/pricing-table-global.css" rel="stylesheet"> <link href="css/styles/your_chosen_color.css" rel="stylesheet"> --> </head> <body> <div class="container"> <div class="row"> <div class="page-header"> <h1> Flat Pricing Table <span class="pull-right" style="font-size: 14px;padding-top: 12px;font-weight: normal;">BS 3.0 Demo - <a href="../2.3/index.html">BS 2.3 Demo</a></span> </h1> </div> </div> <div class="pallete"> <a id="turquoise" href="#"><span class="color color-1"></span></a> <a id="green-sea" href="#"><span class="color color-2"></span></a> <a id="emerald" href="#"><span class="color color-3"></span></a> <a id="nephritis" href="#"><span class="color color-4"></span></a> <a id="peter-river" href="#"><span class="color color-5"></span></a> <a id="belize-hole" href="#"><span class="color color-6"></span></a> <a id="amethyst" href="#"><span class="color color-7"></span></a> <a id="wisteria" href="#"><span class="color color-8"></span></a> <a id="wet-asphalt" href="#"><span class="color color-9"></span></a> <a id="midnight-blue" href="#"><span class="color color-10"></span></a> <a id="sun-flower" href="#"><span class="color color-11"></span></a> <a id="orange" href="#"><span class="color color-12"></span></a> <a id="carrot" href="#"><span class="color color-13"></span></a> <a id="pumpkin" href="#"><span class="color color-14"></span></a> <a id="alizarin" href="#"><span class="color color-15"></span></a> <a id="pomegranate" href="#"><span class="color color-16"></span></a> <a id="concrete" href="#"><span class="color color-17"></span></a> <a id="asbestos" href="#"><span class="color color-18"></span></a> </div> <div class="row"> <div class="sub-header"> <h3>Basic Pricing Table</h3> </div> </div> <div class="row"> <div class="col-md-3 pricing-table belize-hole bordered"> <ul> <li class="title"> Basic </li> <li class="price"> <span class="currency-symbol">$</span> <strong>4</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">1 GB</span>Diskspace </li> <li> <span class="pull-right">10 GB</span>Bandwidth </li> <li> <span class="pull-right">1</span>Domain </li> <li> <span class="pull-right">3</span>Subdomain </li> <li> <span class="pull-right">5</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-3 pricing-table belize-hole bordered"> <ul> <li class="title"> Standard </li> <li class="price"> <span class="currency-symbol">$</span> <strong>19</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">25 GB</span>Diskspace </li> <li> <span class="pull-right">500 GB</span>Bandwidth </li> <li> <span class="pull-right">5</span>Domain </li> <li> <span class="pull-right">25</span>Subdomain </li> <li> <span class="pull-right">100</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-3 pricing-table belize-hole bordered rounded"> <ul> <li class="title"> Advance </li> <li class="price"> <span class="currency-symbol">$</span> <strong>49</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">100 GB</span>Diskspace </li> <li> <span class="pull-right"><strong>Unlimited</strong></span>Bandwidth </li> <li> <span class="pull-right">25</span>Domain </li> <li> <span class="pull-right">100</span>Subdomain </li> <li> <span class="pull-right">500</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-3 pricing-table belize-hole bordered rounded"> <ul> <li class="title"> Professional </li> <li class="price"> <span class="currency-symbol">$</span> <strong>99</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Diskspace </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Bandwidth </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Domain </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Subdomain </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> </div> <div class="row"> <div class="sub-header" style="margin-top: 60px;"> <h3>3 Column Pricing Table</h3> </div> </div> <div class="row"> <div class="col-md-9 span-centered"> <div class="row"> <div class="col-md-4 pricing-table belize-hole bordered"> <ul> <li class="title"> Basic </li> <li class="price"> <span class="currency-symbol">$</span> <strong>4</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">1 GB</span>Diskspace </li> <li> <span class="pull-right">10 GB</span>Bandwidth </li> <li> <span class="pull-right">1</span>Domain </li> <li> <span class="pull-right">3</span>Subdomain </li> <li> <span class="pull-right">5</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-4 pricing-table belize-hole bordered"> <ul> <li class="title"> Standard </li> <li class="price"> <span class="currency-symbol">$</span> <strong>19</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">25 GB</span>Diskspace </li> <li> <span class="pull-right">500 GB</span>Bandwidth </li> <li> <span class="pull-right">5</span>Domain </li> <li> <span class="pull-right">25</span>Subdomain </li> <li> <span class="pull-right">100</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-4 pricing-table belize-hole bordered"> <ul> <li class="title"> Advance </li> <li class="price"> <span class="currency-symbol">$</span> <strong>49</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">100 GB</span>Diskspace </li> <li> <span class="pull-right"><strong>Unlimited</strong></span>Bandwidth </li> <li> <span class="pull-right">25</span>Domain </li> <li> <span class="pull-right">100</span>Subdomain </li> <li> <span class="pull-right">500</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> </div> </div> </div> <div class="row"> <div class="sub-header" style="margin-top: 60px;"> <h3>Pricing Table With Standout Element</h3> </div> </div> <div class="row"> <div class="col-md-3 pricing-table belize-hole bordered"> <ul> <li class="title"> Basic </li> <li class="price"> <span class="currency-symbol">$</span> <strong>4</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">1 GB</span>Diskspace </li> <li> <span class="pull-right">10 GB</span>Bandwidth </li> <li> <span class="pull-right">1</span>Domain </li> <li> <span class="pull-right">3</span>Subdomain </li> <li> <span class="pull-right">5</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-3 pricing-table belize-hole bordered"> <ul> <li class="title"> Standard </li> <li class="price"> <span class="currency-symbol">$</span> <strong>19</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">25 GB</span>Diskspace </li> <li> <span class="pull-right">500 GB</span>Bandwidth </li> <li> <span class="pull-right">5</span>Domain </li> <li> <span class="pull-right">25</span>Subdomain </li> <li> <span class="pull-right">100</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-3 pricing-table belize-hole bordered standout"> <ul> <li class="title"> Advance </li> <li class="price"> <span class="currency-symbol">$</span> <strong>49</strong> <sup>99</sup> <em>/mo</em> </li> <li class="label"> Most Popular! </li> <li> <span class="pull-right">100 GB</span>Diskspace </li> <li> <span class="pull-right"><strong>Unlimited</strong></span>Bandwidth </li> <li> <span class="pull-right">25</span>Domain </li> <li> <span class="pull-right">100</span>Subdomain </li> <li> <span class="pull-right">500</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-3 pricing-table belize-hole bordered"> <ul> <li class="title"> Professional </li> <li class="price"> <span class="currency-symbol">$</span> <strong>99</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Diskspace </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Bandwidth </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Domain </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Subdomain </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> </div> <div class="row"> <div class="sub-header" style="margin-top: 60px;"> <h3>Pricing Table With Hover Animation</h3> </div> </div> <div class="row"> <div class="col-md-3 pricing-table belize-hole bordered hover-animation"> <ul> <li class="title"> Basic </li> <li class="price"> <span class="currency-symbol">$</span> <strong>4</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">1 GB</span>Diskspace </li> <li> <span class="pull-right">10 GB</span>Bandwidth </li> <li> <span class="pull-right">1</span>Domain </li> <li> <span class="pull-right">3</span>Subdomain </li> <li> <span class="pull-right">5</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-3 pricing-table belize-hole bordered hover-animation"> <ul> <li class="title"> Standard </li> <li class="price"> <span class="currency-symbol">$</span> <strong>19</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">25 GB</span>Diskspace </li> <li> <span class="pull-right">500 GB</span>Bandwidth </li> <li> <span class="pull-right">5</span>Domain </li> <li> <span class="pull-right">25</span>Subdomain </li> <li> <span class="pull-right">100</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-3 pricing-table belize-hole bordered standout hover-animation"> <ul> <li class="title"> Advance </li> <li class="price"> <span class="currency-symbol">$</span> <strong>49</strong> <sup>99</sup> <em>/mo</em> </li> <li class="label"> Most Popular! </li> <li> <span class="pull-right">100 GB</span>Diskspace </li> <li> <span class="pull-right"><strong>Unlimited</strong></span>Bandwidth </li> <li> <span class="pull-right">25</span>Domain </li> <li> <span class="pull-right">100</span>Subdomain </li> <li> <span class="pull-right">500</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-3 pricing-table belize-hole bordered hover-animation"> <ul> <li class="title"> Professional </li> <li class="price"> <span class="currency-symbol">$</span> <strong>99</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Diskspace </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Bandwidth </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Domain </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Subdomain </li> <li> <span class="pull-right"><i class="icon-ok"></i></span> <strong>Unlimited</strong> Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> </div> <div class="row"> <div class="sub-header" style="margin-top: 60px;"> <h3>3 Different Themes + 18 Color Variations</h3> </div> </div> <div class="row"> <div class="col-md-9 span-centered"> <div class="row"> <div class="col-md-4 pricing-table belize-hole bordered"> <ul> <li class="title"> Basic </li> <li class="price"> <span class="currency-symbol">$</span> <strong>4</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">1 GB</span>Diskspace </li> <li> <span class="pull-right">10 GB</span>Bandwidth </li> <li> <span class="pull-right">1</span>Domain </li> <li> <span class="pull-right">3</span>Subdomain </li> <li> <span class="pull-right">5</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-4 pricing-table belize-hole bordered"> <ul class="alt"> <li class="title"> Standard </li> <li class="price"> <span class="currency-symbol">$</span> <strong>19</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">25 GB</span>Diskspace </li> <li> <span class="pull-right">500 GB</span>Bandwidth </li> <li> <span class="pull-right">5</span>Domain </li> <li> <span class="pull-right">25</span>Subdomain </li> <li> <span class="pull-right">100</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-4 pricing-table belize-hole bordered"> <ul class="alt-dark"> <li class="title"> Advance </li> <li class="price"> <span class="currency-symbol">$</span> <strong>49</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">100 GB</span>Diskspace </li> <li> <span class="pull-right"><strong>Unlimited</strong></span>Bandwidth </li> <li> <span class="pull-right">25</span>Domain </li> <li> <span class="pull-right">100</span>Subdomain </li> <li> <span class="pull-right">500</span>Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> </div> </div> </div> <div class="row"> <div class="sub-header" style="margin-top: 60px;"> <h3>Alternative Footer & Button Hover Effect</h3> </div> </div> <div class="row"> <div class="col-md-6 span-centered"> <div class="row"> <div class="col-md-6 pricing-table belize-hole bordered"> <ul> <li class="title"> Basic </li> <li class="price"> <span class="currency-symbol">$</span> <strong>4</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">1 GB</span>Diskspace </li> <li> <span class="pull-right">10 GB</span>Bandwidth </li> <li> <span class="pull-right">1</span>Domain </li> <li> <span class="pull-right">3</span>Subdomain </li> <li> <span class="pull-right">5</span>Email Accounts </li> <li class="button colored"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-6 pricing-table belize-hole bordered"> <ul> <li class="title"> Standard </li> <li class="price"> <span class="currency-symbol">$</span> <strong>19</strong> <sup>99</sup> <em>/mo</em> </li> <li> <span class="pull-right">25 GB</span>Diskspace </li> <li> <span class="pull-right">500 GB</span>Bandwidth </li> <li> <span class="pull-right">5</span>Domain </li> <li> <span class="pull-right">25</span>Subdomain </li> <li> <span class="pull-right">100</span>Email Accounts </li> <li class="button btn-hover-alt"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> </div> </div> </div> <div class="row"> <div class="sub-header" style="margin-top: 60px;"> <h3>BONUS</h3> </div> </div> <div class="row"> <div class="col-md-9 span-centered"> <div class="row"> <div class="col-md-4 pricing-table belize-hole bordered plain"> <ul class="centered"> <li class="title"> Basic </li> <li class="price"> <span class="currency-symbol">$</span> <strong>4</strong> <sup>99</sup> <em>/mo</em> </li> <li> 1 GB Diskspace </li> <li> 10 GB Bandwidth </li> <li> 1 Domain </li> <li> 3 Subdomain </li> <li> 5 Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-4 pricing-table belize-hole bordered plain"> <ul class="centered alt"> <li class="title"> Standard </li> <li class="price"> <span class="currency-symbol">$</span> <strong>19</strong> <sup>99</sup> <em>/mo</em> </li> <li> 25 GB Diskspace </li> <li> 500 GB Bandwidth </li> <li> 5 Domain </li> <li> 25 Subdomain </li> <li> 100 Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> <div class="col-md-4 pricing-table belize-hole bordered plain"> <ul class="centered alt-dark"> <li class="title"> Advance </li> <li class="price"> <span class="currency-symbol">$</span> <strong>49</strong> <sup>99</sup> <em>/mo</em> </li> <li> 100 GB Diskspace </li> <li> <strong>Unlimited</strong> Bandwidth </li> <li> 25 Domain </li> <li> 100 Subdomain </li> <li> 500 Email Accounts </li> <li class="button"> <button class="btn btn-large"> <i class="icon-shopping-cart"></i>  Sign Up </button> </li> </ul> </div> </div> </div> </div> <div style="text-align: center; margin-top: 40px;"><a href="#"><i class="icon-arrow-up"></i> Back to Top</a></div> </div> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/less-1.4.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="js/flat.js"></script> </body> </html>

Related: See More

Paper Dashboard 2
BS4 Simple & Clean Pricing table
Bootstrap Tabs with Table
Creative Princing Table

Questions / Comments: