"Pricing Table Columns"
Bootstrap 3.3.0 Snippet by usrec

<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; } .price { display: block; font-size: 21px; font-weight: bold; font-style: italic; } .big { font-size: 24px; } .rbig { font-size: 50px; } .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; } </style> <div class="container prices"> <div class="row"> <div class="col-sm-4 col-md-4"> <div class="option"> <div class="option-title"> <h3>Simple Start</h3> </div> <div class="option-price"> <div class="option-price"> <div> <div id="price1" class="price rbig">$79</div> <span class="period">Per Month</span><br> <select id="simple" style="font-size: 16px;" onchange="document.getElementById('price1').innerHTML='$'+this.value"> <option value="79">5 seats</option> <option value="99">7 seats</option> <option value="129">10 seats</option> <option value="159">15 seats</option> <option value="199">20 seats</option> <option value="219">25 seats</option> <option value="259">35 seats</option> <option value="299">50 seats</option> <option value="349">75 seats</option> <option value="399">100 seats</option> <option value="439">125 seats</option> <option value="499">150 seats</option> <option value="559">200 seats</option> <option value="599">300 seats</option> </select> </select> </div> </div> </div> <div class="option-list"> <ul class="item-list"> <li>Transaction Management</li> <li>Commission Tracking</li> <li>E-signature & Templates</li> <li>Customizable Reports</li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li><div class="qr" id="order1"></div></li> </ul> <button type="button" class="btn btn-success big">Free 30 Day Trial</button> </div> </div> </div> <div class="col-sm-4 col-md-4"> <div class="option"> <div class="option-title"> <h3>Standard</h3> </div> <div class="option-price"> <div> <div id="price2" class="price rbig">$129</div> <span class="period">Per Month</span><br> <select id="standard" style="font-size: 16px;" onchange="document.getElementById('price2').innerHTML='$'+this.value"> <option value="129">5 seats</option> <option value="159">7 seats</option> <option value="189">10 seats</option> <option value="229">15 seats</option> <option value="279">20 seats</option> <option value="319">25 seats</option> <option value="359">35 seats</option> <option value="399">50 seats</option> <option value="479">75 seats</option> <option value="599">100 seats</option> <option value="689">125 seats</option> <option value="759">150 seats</option> <option value="799">200 seats</option> <option value="899">300 seats</option> </select> </select> </div> </div> <div class="option-list"> <ul class="item-list"> <li>Transaction Management</li> <li>Commission Tracking</li> <li>E-signature & Templates</li> <li>Customizable Reports</li> <li>MLS Integration</li> <li>QuickBooks Integration </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li><div class="qr" id="order2"></div></li> </ul> <button type="button" class="btn btn-success big">Free 30 Day Trial</button> </div> </div> </div> <div class="col-sm-4 col-md-4"> <div class="option"> <div class="option-title"> <h3>Enterprise</h3> </div> <div class="option-price"> <div> <div id="price3" class="price rbig">$179</div> <span class="x-interval">Per Month</span><br> <select id="enterprise" style="font-size: 16px;" onchange="document.getElementById('price3').innerHTML='$'+this.value"> <option value="179">5 seats</option> <option value="199">7 seats</option> <option value="229">10 seats</option> <option value="299">15 seats</option> <option value="349">20 seats</option> <option value="389">25 seats</option> <option value="439">35 seats</option> <option value="499">50 seats</option> <option value="599">75 seats</option> <option value="689">100 seats</option> <option value="759">125 seats</option> <option value="799">150 seats</option> <option value="859">200 seats</option> <option value="999">300 seats</option> </select> </div> </div> <div class="option-list"> <ul class="item-list"> <li>Transaction Management</li> <li>Commission Tracking</li> <li>E-signature & Templates</li> <li>Customizable Reports</li> <li>MLS Integration</li> <li>QuickBooks Integration </li> <li>White Label</li> <li>Multiple Office Locations</li> <li>API Access</li> <li>Single Sign-On (SSO)</li> <li>CRM/Contact Sync Integration</li> <li><div class="qr" id="order3"></div></li> </ul> <button type="button" class="btn btn-success big">Free 30 Day Trial</button> </div> </div> </div> </div><!-- /.row --> </div><!-- /.container --> <script type="text/javascript"> $(document).ready(function () { $("#order1").shieldQRcode({ mode: "byte", size: 150, value: "http://transactionadmin.com" }); $("#order2").shieldQRcode({ mode: "byte", size: 150, value: "http://transactionadmin.com" }); $("#order3").shieldQRcode({ mode: "byte", size: 150, value: "http://transactionadmin.com" }); }); </script>

Related: See More


Questions / Comments: