Bootstrap provides three types of form layouts that are Vertical form (default), Horizontal form and Inline form. Add class form-group to the container div for optimum spacing and form-control to all textual <input>, <textarea>, and <select> elements
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
In an inline form, all of the elements are inline, left-aligned, and the labels are alongside. This only applies to forms within viewports that are at least 768px wide. Add class form-inline to the <form> element to get an inline form.
<form class="form-inline">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form" id="pwd" placeholder="Enter password">
</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>
You need to define rows for height of textarea as form-control controls the width only.
<textarea class="form-control" rows="5" id="comment"></textarea>
Use the radio-inline class if you want the radio buttons to appear on the same line.
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label> <label class="radio-inline"><input type="radio" name="optradio">Option 2</label> <label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
Use the .checkbox-inline class if you want the checkboxes to appear on the same line.
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label> <label class="checkbox-inline"><input type="checkbox" value="">Option 2</label> <label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
The input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a help text. The input-group-addon class attaches an icon or help text next to the input field.
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password">
</div>
<div class="input-group">
<span class="input-group-addon">Text</span>
<input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info">
</div>
</form>
The input-group-btn attaches a button next to an input. This is often used together with a search bar
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
INPUT FOCUS - The outline of the input is removed and a box-shadow is applied on focus
DISABLED INPUTS - Add a disabled attribute to disable an input field
DISABLED FIELDSETS - Add a disabled attribute to a fieldset to disable all controls within
READONLY INPUTS - Add a readonly attribute to an input to prevent user input
VALIDATION STATES - Bootstrap includes validation styles for error, warning, and success messages. To use, add has-warning, has-error or has-success to the parent element
ICONS - You can add feedback icons with the .has-feedback class and an icon
HIDDEN LABELS - Add a .sr-only class on non-visible labels
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Focused</label>
<div class="col-sm-10">
<input class="form-control" id="focusedInput" type="text" value="Click to focus">
</div>
</div>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class="form-group has-success has-feedback">
<label class="col-sm-2 control-label" for="inputSuccess">
Input with success and icon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
</form>
Set the heights of input elements using classes like input-lg and input-sm. You can quickly size labels and form controls within a Horizontal form by adding form-group-* to the <div class="form-group"> element. You can also quickly size all inputs and other elements inside an input-group with the input-group-sm or input-group-lg classes
<div class="form-group form-group-lg"></div>
<div class="input-group input-group-lg"></div>
<input class="form-control input-lg" id="inputlg" type="text">
Leave a comment