html - Bootstrap grid alignment -
can 1 check code , tell me why <br> tags aren't working after <textarea> tags <br> , why things messed after date field?
<html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script> <script> $(document).ready(function(){ $('#daterangepicker').datepicker({ format: 'dd/mm/yyyy', }).on('changedate', function(e){ $('#daterangeform').formvalidation('revalidatefield', 'date'); }); }); </script> </head> <body> <h1 align="center">some text here</h1> <div class="form-group"> <div class="col-sm-3"> <label>full name:</label> </div> <div class="col-sm-9"> <input type="text" class="form-control" id="usr" style="width:400px;"/> </div><br><br> <div class="col-sm-3"> <label>father's name:</label> </div> <div class="col-sm-9"> <input type="text" class="form-control" id="usr" style="width:400px;"/> </div><br><br> <div class="col-sm-3"> <label>permanent residential address:</label> </div> <div class="col-sm-9"> <textarea class="form-control" rows="5" id="comment" style="width:400px;"></textarea> </div><br><br> <div class="col-sm-3"> <label>address communication:</label> </div> <div class="col-sm-9"> <textarea class="form-control" rows="5" id="comment" style="width:400px;"></textarea> </div><br><br> <div class="col-sm-3"> <label>date:</label> </div> <div class="col-sm-3 input-group input-append date" id="daterangepicker"> <input type="text" class="form-control" name="date" style="width:400px;"/> <span class="input-group-addon add-on"> <span class="glyphicon glyphicon-calendar"></span> </span> </div><br><br> <div class="col-sm-3"> <label>age on date:</label> </div> <div class="col-sm-9"> <input type="text" class="form-control" id="usr" style="width:400px;"/> </div><br><br> <div class="col-sm-3"> <label>caste:</label> </div> <div class="col-sm-9"> <label>sc</label> <input type="radio"/>    <label>st</label> <input type="radio"/>    <label>obc</label> <input type="radio"/>    <label>general</label> <input type="radio"/> </div><br><br> </body> </html>
if want add spacing below element (in case ) should use css. gives lot more control, , can more different browsers have same result.
seeing you're using inline styles in document, saying
<div class="col-sm-9" style="margin-bottom: 20px;"> generally inline styles not idea - should have in seperate file, using classes , id's assume know :)
Comments
Post a Comment