"donate page 1"
Bootstrap 3.3.0 Snippet by kedarparab

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 ----------> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } .header { padding: 15px; padding-left: 2px; padding-right: 2px; font-size:100%; } .row::after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 15px; } .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} .col-13 {height: 100%;} </style> </head> <body> <div class="header"> <h4 align="center">Pick one or more causes from the following:</h4> </div> <table width = "100%" style="font-size:100%;"> <tr> <td width = "75%" >Facility Room Donor <td width = "25%"> <div data-toggle="buttons" class="btn-group bizmoduleselect"> <label class="btn btn-default"> <div class="bizcontent"> <input type="checkbox" name="var_id[]" autocomplete="off" value=""> <h5>Coffee</h5> </div> </label> </div> </td> </tr> </table> <table width = "100%" style="font-size:100%;"> <tr> <td width = "75%" >Facility Room Donor <td width = "25%"> <div data-toggle="buttons" class="btn-group bizmoduleselect"> <label class="btn btn-default"> <input type="checkbox" name="var_id[]" autocomplete="off" value=""> <h5>Tea</h5> </label> </div> </td> </tr> </table> <table width = "100%" style="font-size:100%;"> <tr> <td width = "75%" >Facility Room Donor <td width = "25%"><button type="button1" class="col-12" class="col-13" style="font-size:100%;"><b>$20000</b></button></td> </tr> </table> </body> </html>
.searchable-container{margin:20px 0 0 0} .searchable-container label.btn-default.active{background-color:#007ba7;color:#FFF} .searchable-container label.btn-default{width:90%;border:1px solid #efefef;margin:5px; box-shadow:5px 8px 8px 0 #ccc;} .searchable-container label .bizcontent{width:100%;} .searchable-container .btn-group{width:90%} .searchable-container .btn span.glyphicon{ opacity: 0; } .searchable-container .btn.active span.glyphicon { opacity: 1; }
$(function() { $('#search').on('keyup', function() { var pattern = $(this).val(); $('.searchable-container .items').hide(); $('.searchable-container .items').filter(function() { return $(this).text().match(new RegExp(pattern, 'i')); }).show(); }); }); var x = 5; var y = 6; var z = x + y; document.getElementById("demo").innerHTML = z;

Related: See More

Rubik Presentation Page
Elegant Login Page
My Awesome Login Page
Simple & Clean 404 Error Page style

Questions / Comments: