Menu
I made a jsfiddle with 3 input elements: http://jsfiddle.net/zb4dc/1/
As you can see they do not align well. How can this be done?
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
</div>
</div>
<div class="form-group">
<label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
<div class="controls">
<div class="input-group">
<input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
<div class="form-group">
<label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
</div>
</form>
259
To make a form horizontal, add class=”form-horizontal” in the <form> element. If you're using the <label> element then you must use class=”control-label”. Also, remember that you can use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.
Using input groups you can easily prepend and append text or buttons to the text-based inputs. For example, you can add the $ symbol, @ for a Twitter username, or anything else as required. Form groups are used to wrap labels and form controls in a div to get optimum spacing between the label and the control.
form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom , but it picks up additional styles in . form-inline as needed.
You just forgot a col-sm-10 in the second input field. Here's your corrected code:
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
</div>
</div>
<div class="form-group">
<label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
<div class="col-sm-10 controls">
<div class="input-group">
<input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
<div class="form-group">
<label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
</div>
</div>
</form>
</div>
</body>
Fiddle: http://jsfiddle.net/zb4dc/2/
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
