Bootstrap3 CSS API Notes - Form

Any element with .form-control has width:100%; by default.

You can nest the .input-group in .form-group but don’t mix them directly.

Vertical Form in Bootstrap3

1
2
3
4
5
6
<form role="form">
	<div class="form-group"> 
		<label for="example"></label>
		<input type="" id="example" class='form-control' placeholder=''>
	</div>
</form>

Inline Form in Bootstrap3 (i.e. For a device that has less than 768px width.xs, the elements that listed inline in larger device will list in block)

1
2
3
4
5
6
7
<form class='form-inline' role="form">
	<div class='form-group'>	
		<label for="examle">You must always add labels. You can use .sr-only class to hide it</label> 
		<input type="" class="form-control" id="example"/> //Define grid for input area
			<input ...>
	</div>
</form>

Supported Form Controls

All html5 input type are supported: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color

<fieldset> can be used to wrap a few form-group in order to easily apply style.

.disabled can be added to .radio or .checkbox or <fieldset> to disable these elements.

.checkbox-inline or .radio-inline create inline-element. They needs to be wrpped in <label>: 

1
2
3
4
<label class="checkbox-line">
	<input type="checkbox" id="test" value="test"> test
	<!-- 'test' here can be skipped if this checkbox don't need any label. But this input must always be wrapped in <label> tag.-->
</label>

.form-control-static can be put in a <p> tag to create a text that hold the place as a input field

1
2
3
4
<div class="form-group">
	<label for="test">Test:</label>
	<p class="form-control-static" id="test">This is a text</p>
</div>

After using Javascript to valid data in input field, ‘.has-warning’,.has-error or .has-success can be added to input fields to show validation result. <span class="glyphicon plyphicon-warning-sign form-control-feedback> can be added after <input> field if optional icons are needed.

<span class=".help-block" can add help text under input field

Input Group

To add icon, put <span class='input-group-addon'></span> inside a input-group class

To add button attched to input, use .input-group-btnfor a span and add button in span. Put this span right after input box.

Input group can have height class .input-group-lg.