Form alignment with Bootstrap
Question
How do I create form with following format[Shown in Picture]- Irrespective of the size of name variable(Name, Mobile,Gender,Age) , all the value receiving blocks are of same size, aligned one below another.
My approach is that two div would be there one with all names and other with all blocks. But it's weird I haven't done anything like this before.
And Can It be done by Bootstrap? I would prefer that.
1 answers
solution1
0 2016-08-27 11:54:05
<!DOCTYPE html> <html lang="en"> <head> <title>Rizwan Ali</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Your Required Form with bootstrap</h2> <form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Name:</label> <div class="col-sm-4"> <input type="text" class="form-control" placeholder="Enter Name"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Mobile:</label> <div class="col-sm-4"> <input type="number" class="form-control" placeholder="Enter 10 digits"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2">Alternate Mobile:</label> <div class="col-sm-4"> <input type="number" class="form-control"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Gender:</label> <div class="col-sm-4"> <select class="form-control"> <option value="male">Male</option> <option value="female">Female</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Age:</label> <div class="col-sm-4"> <input type="number" class="form-control" id="pwd" placeholder="In Years"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Date of Dog Bite:</label> <div class="col-sm-4"> <input type="date" class="form-control"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Credit Card Number:</label> <div class="col-sm-4"> <input type="date" class="form-control"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
dynamic bootstrap form alignment
Form field alignment difficulty in bootstrap
Bootstrap inline form button alignment
Alignment issue with datatables in bootstrap
Bootstrap Mobile Navigation Alignment
Bootstrap tooltip out of alignment
Bootstrap thumbnail alignment (horizontal)
I am trying to implement a form within a bootstrap popover but the alignment gets off? Help needed
jQuery form alignment plugin?
Bootstrap grid alignment not displaying properly
Related Tags