"Pricing Table Columns"
Bootstrap 3.3.0 Snippet by yashinaki

<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 ----------> <!-- you need to include the shieldui css and js assets in order for the grids to work --> <script type="text/javascript" src="http://www.prepbootstrap.com/Content/shieldui-lite/dist/js/shieldui-lite-all.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <style type="text/css"> .qr { margin-left: auto; margin-right: auto; } .prices { padding-bottom: 40px; color: #fff; background: #B3C0DD; background: -moz-linear-gradient(-45deg, #3f4c6b 0%, #3f4c6b 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3f4c6b), color-stop(100%,#3f4c6b)); background: -webkit-linear-gradient(-45deg, #B3C0DD 0%,#3f4c6b 100%); background: -o-linear-gradient(-45deg, #B3C0DD 0%,#3f4c6b 100%); background: -ms-linear-gradient(-45deg, #B3C0DD 0%,#3f4c6b 100%); background: linear-gradient(135deg, #B3C0DD 0%,#3f4c6b 100%); } .pricing-tables-jumbotron { text-align: center; background: none; } .big { font-size: 37px; } .option { background: #f9f9f9; box-shadow: 0 0 1px rgba(0, 0, 0, .2); border-radius: 4px 4px 0 0; position: relative; margin: 20px 0; text-align: center; color: #333; } .option:hover .hided-icon { color: #fff; padding: 0 10px; } .option > .option-title { padding: 20px; } .option > .option-title > h3 { font-weight: bold; font-size: 32px; text-transform: uppercase; margin: 0; } .option > .option-title > span { font-style: italic; font-size: 16px; } .option > .option-price { background: #fff; padding: 0 0 10px; color: #0FB112; } .option > .option-price > .price { display: block; font-size: 72px; font-weight: bold; font-style: italic; } .option > .option-price > .period { font-size: 14px; } .option .option-list { padding: 0; } .option .item-list { list-style: none; padding: 0; } .option .item-list li:nth-child(even) { background: #fdfdfd; } .option .item-list > li { padding: 10px 5px; font-size: 16px; } .option .btn { width: 100%; padding: 18px 8px; border-radius: 0; border: none; text-transform: uppercase; } .option .btn-success { color: #fff; background: #0FB112; } .option .btn-success:hover { background: #1d7019; } .option .hided-icon { color: #0FB112; margin-left: -14px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } </style> <div class="container prices"> <div class="jumbotron pricing-tables-jumbotron"> <h2>3 Column Pricing Layout</h2> </div> <div class="row"> <div class="col-sm-4 col-md-4"> <div class="option"> <div class="option-title"> <h3>Trial</h3> <span>no strings attached</span> </div> <div class="option-price"> <span class="price">$0</span> <span class="period">per month</span> </div> <div class="option-list"> <ul class="item-list"> <li><strong>1GB</strong> Disk Space</li> <li><strong>0</strong> Email Addresses</li> <li><strong>2</strong> Domains </li> <li><strong>4</strong> Subdomains</li> <li><div class="qr" id="order1"></div></li> </ul> <button type="button" class="btn btn-success big"><i class="fa fa-hand-o-right hided-icon big"></i> Sign Up</button> </div> </div> </div> <div class="col-sm-4 col-md-4"> <div class="option"> <div class="option-title"> <h3>Standard</h3> <span>most valued</span> </div> <div class="option-price"> <span class="price">$99</span> <span class="period">per month</span> </div> <div class="option-list"> <ul class="item-list"> <li><strong>12GB</strong> Disk Space</li> <li><strong>7</strong> Email Addresses</li> <li><strong>10</strong> Domains </li> <li><strong>40</strong> Subdomains</li> <li><div class="qr" id="order2"></div></li> </ul> <button type="button" class="btn btn-success big"><i class="fa fa-hand-o-right hided-icon big"></i> Sign Up</button> </div> </div> </div> <div class="col-sm-4 col-md-4"> <div class="option"> <div class="option-title"> <h3>Premium</h3> <span>extended version</span> </div> <div class="option-price"> <span class="price">$150</span> <span class="period">per month</span> </div> <div class="option-list"> <ul class="item-list"> <li><strong>50GB</strong> Disk Space</li> <li><strong>30</strong> Email Addresses</li> <li><strong>30</strong> Domains </li> <li><strong>120</strong> Subdomains</li> <li><div class="qr" id="order3"></div></li> </ul> <button type="button" class="btn btn-success big"><i class="fa fa-hand-o-right hided-icon big"></i> Sign Up</button> </div> </div> </div> </div><!-- /.row --> </div><!-- /.container --> <br/> <br/> <br/> <div class="container"> <div class="row"> <div> This template uses the ShieldUI-Lite open source Suite. It it used for visualization of a QR byte code.<br /> The <a href="https://github.com/shieldui/shieldui-lite/\">ShieldUI-Lite</a> QR code allows encoding into all dimensions and data capacities available for the QR code symbology.<br /> To see more examples of this type of widget, please go <a href="https://demos.shieldui.com/web/qrcode/basic-usage\">here</a>.<br /> The control also supports a flexible <a href="https://demos.shieldui.com/web/qrcode/api\">API</a> for dynamic modification and initialization.<br /> The full documentation on the widget is available <a href="https://www.shieldui.com/documentation/qrcode/javascript/getting.started\">here</a>.<br /> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $("#order1").shieldQRcode({ mode: "byte", size: 150, value: "https://somesite/order?plan=1" }); $("#order2").shieldQRcode({ mode: "byte", size: 150, value: "https://somesite/order?plan=2" }); $("#order3").shieldQRcode({ mode: "byte", size: 150, value: "https://somesite/order?plan=3" }); }); </script>

Related: See More


Questions / Comments: