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
"Fire Hydrant Painting and Visual Inspection"
Bootstrap 3.3.0 Snippet by
zvoice
3.3.0
Preview
HTML
CSS
View Full Screen
Fork
Fork this
2.1K
 
1 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 ----------> <div class="container"> <div class="row"> <div class="no-more-tables"> <table class="col-md-12 table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th colspan="4" style="text-align:center; color: white; background-color:#295f89;">Painting</th> </tr> </thead> <tbody> <tr> <td>Was hydrant painted:</td> <td> Yes <input type="radio" style="display:inline;width:20px" name='hydranPainted'> No <input type="radio" style="display:inline;width:20px" name='hydranPainted'> </td> <td>Was vegetation removal required?</td> <td> Yes <input type="radio" style="display:inline;width:20px" name='vegetationremovalRequired'> No <input type="radio" style="display:inline;width:20px" name='vegetationremovalRequired'> </td> </tr> <tr> <td>If yes:</td> <td> Brushed <input type="radio" style="display:inline;width:20px" name='hydranPaintType'> Sprayed <input type="radio" style="display:inline;width:20px" name='hydranPaintType'> </td> <td>Was site returned to original condition?</td> <td> Yes <input type="radio" style="display:inline;width:20px" name='siteReturned'> No <input type="radio" style="display:inline;width:20px" name='siteReturned'> </td> </tr> <tr> <td colspan="2">If no, why:<input class="form-control transparent-input" type='text' name='hydrantNoPaintReason'></td> </tr> </tbody> </table> </div> </div> <div class="row" style="margin-top:20px;"> <div class="no-more-tables"> <table class="col-md-12 table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th colspan="10" style="text-align:center; color: white; background-color:#295f89;">Visual Inspection</th> </tr> </thead> <tbody> <tr> <td colspan="10">Indicate yes or no and describe actions taken at the bottom of this form.</td> </tr> <tr> <td>*Signs of damage, leakage or vandalism?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="signsdamage" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="signsdamage" class="form-control" style="min-width: 20px;"></td> <td>Sunken areas filled?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="sunkenAreasFilled" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="sunkenAreasFilled" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td>*Missing or damaged bolts?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="missingBolts" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="missingBolts" class="form-control" style="min-width: 20px;"></td> <td>*Auxiliary valve accessible?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="auxvalveAccessible" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="auxvalveAccessible" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td rowspan="2">Any landscape, walls, vehicles or other obstacles within 3 feet?</td> <td style="text-align:center;" rowspan="2">Yes</td> <td rowspan="2"><input type="radio" name="3feet" class="form-control" style="min-width: 20px;"></td> <td rowspan="2" style="text-align:center;">No</td> <td rowspan="2"><input type="radio" name="3feet" class="form-control" style="min-width: 20px;"></td> <td>Missing cap(s)? Nozzle? Streamer?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="missingCaps" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="missingCaps" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td>Missing chain(s)?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="missingChains" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="missingChains" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td>If yes, was notice left at residence?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="noteLeft" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="noteLeft" class="form-control" style="min-width: 20px;"></td> <td>*Needs to be raised or lowered?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="needsRaised" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="needsRaised" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td>*Hydrant leak or weep valve issue?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="hydrantLeak" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="hydrantLeak" class="form-control" style="min-width: 20px;"></td> <td>Work order needed?</td> <td style="text-align:center;">Yes</td> <td><input type="radio" name="woNeeded" class="form-control" style="min-width: 20px;"></td> <td style="text-align:center;">No</td> <td><input type="radio" name="woNeeded" class="form-control" style="min-width: 20px;"></td> </tr> <tr> <td colspan="10">*Indicates a Work Order is needed</td> </tr> </tbody> </table> </div> </div> </div>
@media only screen and (max-width: 800px) { /* Force table to not be like tables anymore */ .no-more-tables table, .no-more-tables thead, .no-more-tables tbody, .no-more-tables th, .no-more-tables td, .no-more-tables tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ .no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; } .no-more-tables tr { border: 1px solid #ccc; } .no-more-tables td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; white-space: normal; text-align:left; } .no-more-tables td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align:left; font-weight: bold; } /* Label the data */ .no-more-tables td:before { content: attr(data-title); } } input.transparent-input { border:none !important; border-bottom: dotted 2px #c9c9c9 !important; } .transparent-input { background-color: rgba(0, 0, 0, 0); border:none; border-bottom: dotted 2px #c9c9c9 !important; box-shadow:none !important; display: inline-block; width:50%; } input.transparent-input{ background-color:rgba(0,0,0,0) !important; border:none !important; border-bottom: dotted 2px #c9c9c9 !important; } td input[type="radio"] { display: block; margin: auto; width: 20px; }
Related:
See More
Free Template
Now UI Dashboard
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76