"Detail forms Design in bootstrap"
Bootstrap 3.3.0 Snippet by onojagodday

<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"> <table class="table table-striped"> <tbody> <tr> <td colspan="1"> <form class="well form-horizontal"> <fieldset> <div class="form-group"> <label class="col-md-4 control-label">Full Name</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input id="fullName" name="fullName" placeholder="Full Name" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Address Line 1</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine1" name="addressLine1" placeholder="Address Line 1" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Address Line 2</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine2" name="addressLine2" placeholder="Address Line 2" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">City</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="city" name="city" placeholder="City" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">State/Province/Region</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="state" name="state" placeholder="State/Province/Region" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Postal Code/ZIP</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="postcode" name="postcode" placeholder="Postal Code/ZIP" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Country</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon" style="max-width: 100%;"><i class="glyphicon glyphicon-list"></i></span> <select class="selectpicker form-control"> <option>A really long option to push the menu over the edget</option> </select> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Email</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span><input id="email" name="email" placeholder="Email" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Phone Number</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span><input id="phoneNumber" name="phoneNumber" placeholder="Phone Number" class="form-control" required="true" value="" type="text"></div> </div> </div> </fieldset> </form> </td> <td colspan="1"> <form class="well form-horizontal"> <fieldset> <div class="form-group"> <label class="col-md-4 control-label">Full Name</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input id="fullName" name="fullName" placeholder="Full Name" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Address Line 1</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine1" name="addressLine1" placeholder="Address Line 1" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Address Line 2</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="addressLine2" name="addressLine2" placeholder="Address Line 2" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">City</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="city" name="city" placeholder="City" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">State/Province/Region</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="state" name="state" placeholder="State/Province/Region" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Postal Code/ZIP</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span><input id="postcode" name="postcode" placeholder="Postal Code/ZIP" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Country</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"> <span class="input-group-addon" style="max-width: 100%;"><i class="glyphicon glyphicon-list"></i></span> <select class="selectpicker form-control"> <option>A really long option to push the menu over the edget</option> </select> </div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Email</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span><input id="email" name="email" placeholder="Email" class="form-control" required="true" value="" type="text"></div> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Phone Number</label> <div class="col-md-8 inputGroupContainer"> <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span><input id="phoneNumber" name="phoneNumber" placeholder="Phone Number" class="form-control" required="true" value="" type="text"></div> </div> </div> </fieldset> </form> </td> </tr> </tbody> </table> </div>

Related: See More


Questions / Comments: