{% layout 'layout' %}
{% block title %}Forms{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">UI Elements</a></li>
<li class="active"><a href="ui-forms.html">Forms</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{% endblock %}

{% block content %}
<div class="row">
	<div class="col-sm-12">
		<div class="alert alert-inverse">
			Use the <strong>same</strong> code as you would in <a class="alert-link" href="http://getbootstrap.com/">Twitter's Bootstrap</a>!
			<button type="button" class="close" data-dismiss="alert">&times;</button>
		</div>
		<div class="panel panel-midnightblue">
			<div class="panel-heading">
				<h2>Form Layout</h2>
				<div class="options">
					<ul class="nav nav-tabs">
		              <li><a href="#vertical-form" data-toggle="tab">Vertical Form</a></li>
		              <li class="active"><a href="#horizontal-form" data-toggle="tab">Horizontal Form</a></li>
		              <li><a href="#bordered-row" data-toggle="tab">Bordered Row</a></li>
		              <li><a href="#tabular-form" data-toggle="tab">Tabular Form</a></li>
		            </ul>
				</div>
			</div>
			<div class="panel-body">
				<div class="tab-content">
					<div class="tab-pane active" id="horizontal-form">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="focusedinput" class="col-sm-2 control-label">Focused Input</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="focusedinput" placeholder="Default Input">
								</div>
								<div class="col-sm-2">
									<p class="help-block">Your help text!</p>
								</div>
							</div>
							<div class="form-group">
								<label for="disabledinput" class="col-sm-2 control-label">Disabled Input</label>
								<div class="col-sm-8">
									<input disabled type="text" class="form-control" id="disabledinput" placeholder="Disabled Input">
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword" class="col-sm-2 control-label">Password</label>
								<div class="col-sm-8">
									<input type="password" class="form-control" id="inputPassword" placeholder="Password">
								</div>
							</div>
							<div class="form-group">
								<label for="checkbox" class="col-sm-2 control-label">Checkbox</label>
								<div class="col-sm-8">
									<div class="checkbox block"><label><input type="checkbox"> Unchecked</label></div>
									<div class="checkbox block"><label><input type="checkbox" checked> Checked</label></div>
									<div class="checkbox block"><label><input type="checkbox" disabled> Disabled Unchecked</label></div>
									<div class="checkbox block"><label><input type="checkbox" disabled checked> Disabled Checked</label></div>
								</div>
							</div>
							<div class="form-group">
								<label for="checkbox" class="col-sm-2 control-label">Checkbox Inline</label>
								<div class="col-sm-8">
									<div class="checkbox-inline"><label><input type="checkbox"> Unchecked</label></div>
									<div class="checkbox-inline"><label><input type="checkbox" checked> Checked</label></div>
									<div class="checkbox-inline"><label><input type="checkbox" disabled> Disabled Unchecked</label></div>
									<div class="checkbox-inline"><label><input type="checkbox" disabled checked> Disabled Checked</label></div>
								</div>
							</div>
							<div class="form-group">
								<label for="selector1" class="col-sm-2 control-label">Dropdown Select</label>
								<div class="col-sm-8"><select name="selector1" id="selector1" class="form-control">
									<option>Lorem ipsum dolor sit amet.</option>
									<option>Dolore, ab unde modi est!</option>
									<option>Illum, fuga minus sit eaque.</option>
									<option>Consequatur ducimus maiores voluptatum minima.</option>
								</select></div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">Multiple Select</label>
								<div class="col-sm-8">
									<select multiple="" class="form-control">
										<option>Option 1</option>
										<option>Option 2</option>
										<option>Option 3</option>
										<option>Option 4</option>
										<option>Option 5</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="txtarea1" class="col-sm-2 control-label">Textarea</label>
								<div class="col-sm-8"><textarea name="txtarea1" id="txtarea1" cols="50" rows="4" class="form-control"></textarea></div>
							</div>
							<div class="form-group">
								<label for="radio" class="col-sm-2 control-label">Radio</label>
								<div class="col-sm-8">
									<div class="radio block"><label><input type="radio"> Unchecked</label></div>
									<div class="radio block"><label><input type="radio" checked> Checked</label></div>
									<div class="radio block"><label><input type="radio" disabled> Disabled Unchecked</label></div>
									<div class="radio block"><label><input type="radio" disabled checked> Disabled Checked</label></div>
								</div>
							</div>
							<div class="form-group">
								<label for="radio" class="col-sm-2 control-label">Radio Inline</label>
								<div class="col-sm-8">
									<div class="radio-inline"><label><input type="radio"> Unchecked</label></div>
									<div class="radio-inline"><label><input type="radio" checked> Checked</label></div>
									<div class="radio-inline"><label><input type="radio" disabled> Disabled Unchecked</label></div>
									<div class="radio-inline"><label><input type="radio" disabled checked> Disabled Checked</label></div>
								</div>
							</div>
							<div class="form-group">
								<label for="smallinput" class="col-sm-2 control-label label-input-sm">Small Input</label>
								<div class="col-sm-8">
									<input type="text" class="form-control input-sm" id="smallinput" placeholder="Small Input">
								</div>
							</div>
							<div class="form-group">
								<label for="mediuminput" class="col-sm-2 control-label">Medium Input</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="mediuminput" placeholder="Medium Input">
								</div>
							</div>
							<div class="form-group">
								<label for="largeinput" class="col-sm-2 control-label label-input-lg">Large Input</label>
								<div class="col-sm-8">
									<input type="text" class="form-control input-lg" id="largeinput" placeholder="Large Input">
								</div>
							</div>
						</form>
					</div>
					<div class="tab-pane" id="vertical-form">
						<form>
						<div class="form-group">
							<label for="focusedinput" class="control-label">Focused Input</label>
							<input type="text" class="form-control" id="focusedinput" placeholder="Default Input">
						</div>
						<div class="form-group">
							<label for="disabledinput" class="control-label">Disabled Input</label>
							<input disabled type="text" class="form-control" id="disabledinput" placeholder="Disabled Input">
						</div>
						<div class="form-group">
							<label for="inputPassword" class="control-label">Password</label>
							<input type="password" class="form-control" id="inputPassword" placeholder="Password">
						</div>
						<div class="form-group">
							<label for="checkbox" class="control-label">Checkbox</label>
							<div class="checkbox block"><label><input type="checkbox"> Unchecked</label></div>
							<div class="checkbox block"><label><input type="checkbox" checked> Checked</label></div>
							<div class="checkbox block"><label><input type="checkbox" disabled> Disabled Unchecked</label></div>
							<div class="checkbox block"><label><input type="checkbox" disabled checked> Disabled Checked</label></div>
						</div>
						<div class="form-group">
							<label for="selector1" class="control-label">Dropdown Select</label>
							<select name="selector1" id="selector1" class="form-control">
								<option>Lorem ipsum dolor sit amet.</option>
								<option>Dolore, ab unde modi est!</option>
								<option>Illum, fuga minus sit eaque.</option>
								<option>Consequatur ducimus maiores voluptatum minima.</option>
							</select>
						</div>
						<div class="form-group">
							<label class="control-label">Multiple Select</label>
							<select multiple="" class="form-control">
								<option>Option 1</option>
								<option>Option 2</option>
								<option>Option 3</option>
								<option>Option 4</option>
								<option>Option 5</option>
							</select>
						</div>
						<div class="form-group">
							<label for="txtarea1" class="control-label">Textarea</label>
							<textarea name="txtarea1" id="txtarea1" cols="50" rows="4" class="form-control"></textarea>
						</div>
						<div class="form-group">
							<label for="radio" class="control-label">Radio</label>
							<div class="radio block"><label><input type="radio"> Unchecked</label></div>
							<div class="radio block"><label><input type="radio" checked> Checked</label></div>
							<div class="radio block"><label><input type="radio" disabled> Disabled Unchecked</label></div>
							<div class="radio block"><label><input type="radio" disabled checked> Disabled Checked</label></div>
						</div>
						<div class="form-group">
							<label for="smallinput" class="control-label label-input-sm">Small Input</label>
							<input type="text" class="form-control input-sm" id="smallinput" placeholder="Small Input">
						</div>
						<div class="form-group">
							<label for="mediuminput" class="control-label">Medium Input</label>
							<input type="text" class="form-control" id="mediuminput" placeholder="Medium Input">
						</div>
						<div class="form-group">
							<label for="largeinput" class="control-label label-input-lg">Large Input</label>
							<input type="text" class="form-control input-lg" id="largeinput" placeholder="Large Input">
						</div>
						</form>
					</div>
					<div class="tab-pane" id="bordered-row">

						<form class="form-horizontal row-border">
							<div class="form-group">
								<label for="focusedinput" class="col-sm-2 control-label">Focused Input</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="focusedinput" placeholder="Default Input">
								</div>
								<div class="col-sm-2">
									<p class="help-block">Your help text!</p>
								</div>
							</div>
							<div class="form-group">
								<label for="disabledinput" class="col-sm-2 control-label">Disabled Input</label>
								<div class="col-sm-8">
									<input disabled type="text" class="form-control" id="disabledinput" placeholder="Disabled Input">
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword" class="col-sm-2 control-label">Password</label>
								<div class="col-sm-8">
									<input type="password" class="form-control" id="inputPassword" placeholder="Password">
								</div>
							</div>
							<div class="form-group">
								<label for="checkbox" class="col-sm-2 control-label">Checkbox</label>
								<div class="col-sm-8">
									<div class="checkbox block"><label><input type="checkbox"> Unchecked</label></div>
									<div class="checkbox block"><label><input type="checkbox" checked> Checked</label></div>
									<div class="checkbox block"><label><input type="checkbox" disabled> Disabled Unchecked</label></div>
									<div class="checkbox block"><label><input type="checkbox" disabled checked> Disabled Checked</label></div>
								</div>
							</div>
							<div class="form-group">
								<label for="checkbox" class="col-sm-2 control-label">Checkbox Inline</label>
								<div class="col-sm-8">
									<div class="checkbox-inline"><label><input type="checkbox"> Unchecked</label></div>
									<div class="checkbox-inline"><label><input type="checkbox" checked> Checked</label></div>
									<div class="checkbox-inline"><label><input type="checkbox" disabled> Disabled Unchecked</label></div>
									<div class="checkbox-inline"><label><input type="checkbox" disabled checked> Disabled Checked</label></div>
								</div>
							</div>
							<div class="form-group">
								<label for="selector1" class="col-sm-2 control-label">Dropdown Select</label>
								<div class="col-sm-8"><select name="selector1" id="selector1" class="form-control">
									<option>Lorem ipsum dolor sit amet.</option>
									<option>Dolore, ab unde modi est!</option>
									<option>Illum, fuga minus sit eaque.</option>
									<option>Consequatur ducimus maiores voluptatum minima.</option>
								</select></div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">Multiple Select</label>
								<div class="col-sm-8">
									<select multiple="" class="form-control">
										<option>Option 1</option>
										<option>Option 2</option>
										<option>Option 3</option>
										<option>Option 4</option>
										<option>Option 5</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="txtarea1" class="col-sm-2 control-label">Textarea</label>
								<div class="col-sm-8"><textarea name="txtarea1" id="txtarea1" cols="50" rows="4" class="form-control"></textarea></div>
							</div>
							<div class="form-group">
								<label for="radio" class="col-sm-2 control-label">Radio</label>
								<div class="col-sm-8">
									<div class="radio block"><label><input type="radio"> Unchecked</label></div>
									<div class="radio block"><label><input type="radio" checked> Checked</label></div>
									<div class="radio block"><label><input type="radio" disabled> Disabled Unchecked</label></div>
									<div class="radio block"><label><input type="radio" disabled checked> Disabled Checked</label></div>
								</div>
							</div>
							<div class="form-group">
								<label for="radio" class="col-sm-2 control-label">Radio Inline</label>
								<div class="col-sm-8">
									<div class="radio-inline"><label><input type="radio"> Unchecked</label></div>
									<div class="radio-inline"><label><input type="radio" checked> Checked</label></div>
									<div class="radio-inline"><label><input type="radio" disabled> Disabled Unchecked</label></div>
									<div class="radio-inline"><label><input type="radio" disabled checked> Disabled Checked</label></div>
								</div>
							</div>
							<div class="form-group">
								<label for="smallinput" class="col-sm-2 control-label label-input-sm">Small Input</label>
								<div class="col-sm-8">
									<input type="text" class="form-control input-sm" id="smallinput" placeholder="Small Input">
								</div>
							</div>
							<div class="form-group">
								<label for="mediuminput" class="col-sm-2 control-label">Medium Input</label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="mediuminput" placeholder="Medium Input">
								</div>
							</div>
							<div class="form-group">
								<label for="largeinput" class="col-sm-2 control-label label-input-lg">Large Input</label>
								<div class="col-sm-8">
									<input type="text" class="form-control input-lg" id="largeinput" placeholder="Large Input">
								</div>
							</div>
						</form>					
					</div>
					<div class="tab-pane" id="tabular-form">
						<form class="form-horizontal tabular-form">
							<div class="form-group">
								<label for="focusedinput" class="col-sm-2 control-label">Focused Input</label>
								<div class="col-sm-8 tabular-border">
									<input type="text" class="form-control" id="focusedinput" placeholder="Default Input">
								</div>
								<div class="col-sm-2">
									<p class="help-block">Your help text!</p>
								</div>
							</div>
							<div class="form-group">
								<label for="disabledinput" class="col-sm-2 control-label">Disabled Input</label>
								<div class="col-sm-8 tabular-border">
									<input disabled type="text" class="form-control" id="disabledinput" placeholder="Disabled Input">
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword" class="col-sm-2 control-label">Password</label>
								<div class="col-sm-8 tabular-border">
									<input type="password" class="form-control" id="inputPassword" placeholder="Password">
								</div>
							</div>
							<div class="form-group">
								<label for="checkbox" class="col-sm-2 control-label">Checkbox</label>
								<div class="col-sm-8 tabular-border">
									<div class="checkbox block"><label><input type="checkbox"> Unchecked</label></div>
									<div class="checkbox block"><label><input type="checkbox" checked> Checked</label></div>
									<div class="checkbox block"><label><input type="checkbox" disabled> Disabled Unchecked</label></div>
									<div class="checkbox block"><label><input type="checkbox" disabled checked> Disabled Checked</label></div>
								</div>
							</div>
							<div class="form-group">
								<label for="checkbox" class="col-sm-2 control-label">Checkbox Inline</label>
								<div class="col-sm-8 tabular-border">
									<div class="checkbox-inline"><label><input type="checkbox"> Unchecked</label></div>
									<div class="checkbox-inline"><label><input type="checkbox" checked> Checked</label></div>
									<div class="checkbox-inline"><label><input type="checkbox" disabled> Disabled Unchecked</label></div>
									<div class="checkbox-inline"><label><input type="checkbox" disabled checked> Disabled Checked</label></div>
								</div>
							</div>
							<div class="form-group">
								<label for="selector1" class="col-sm-2 control-label">Dropdown Select</label>
								<div class="col-sm-8 tabular-border"><select name="selector1" id="selector1" class="form-control">
									<option>Lorem ipsum dolor sit amet.</option>
									<option>Dolore, ab unde modi est!</option>
									<option>Illum, fuga minus sit eaque.</option>
									<option>Consequatur ducimus maiores voluptatum minima.</option>
								</select></div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">Multiple Select</label>
								<div class="col-sm-8 tabular-border">
									<select multiple="" class="form-control">
										<option>Option 1</option>
										<option>Option 2</option>
										<option>Option 3</option>
										<option>Option 4</option>
										<option>Option 5</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label for="txtarea1" class="col-sm-2 control-label">Textarea</label>
								<div class="col-sm-8 tabular-border"><textarea name="txtarea1" id="txtarea1" cols="50" rows="4" class="form-control"></textarea></div>
							</div>
							<div class="form-group">
								<label for="radio" class="col-sm-2 control-label">Radio</label>
								<div class="col-sm-8 tabular-border">
									<div class="radio block"><label><input type="radio"> Unchecked</label></div>
									<div class="radio block"><label><input type="radio" checked> Checked</label></div>
									<div class="radio block"><label><input type="radio" disabled> Disabled Unchecked</label></div>
									<div class="radio block"><label><input type="radio" disabled checked> Disabled Checked</label></div>
								</div>
							</div>
							<div class="form-group">
								<label for="radio" class="col-sm-2 control-label">Radio Inline</label>
								<div class="col-sm-8 tabular-border">
									<div class="radio-inline"><label><input type="radio"> Unchecked</label></div>
									<div class="radio-inline"><label><input type="radio" checked> Checked</label></div>
									<div class="radio-inline"><label><input type="radio" disabled> Disabled Unchecked</label></div>
									<div class="radio-inline"><label><input type="radio" disabled checked> Disabled Checked</label></div>
								</div>
							</div>
							<div class="form-group">
								<label for="smallinput" class="col-sm-2 control-label label-input-sm">Small Input</label>
								<div class="col-sm-8 tabular-border">
									<input type="text" class="form-control input-sm" id="smallinput" placeholder="Small Input">
								</div>
							</div>
							<div class="form-group">
								<label for="mediuminput" class="col-sm-2 control-label">Medium Input</label>
								<div class="col-sm-8 tabular-border">
									<input type="text" class="form-control" id="mediuminput" placeholder="Medium Input">
								</div>
							</div>
							<div class="form-group">
								<label for="largeinput" class="col-sm-2 control-label label-input-lg">Large Input</label>
								<div class="col-sm-8 tabular-border">
									<input type="text" class="form-control input-lg" id="largeinput" placeholder="Large Input">
								</div>
							</div>
						</form>					
					</div>
				</div>

				<div class="panel-footer">
					<div class="row">
						<div class="col-sm-8 col-sm-offset-2">
							<button class="btn-primary btn">Submit</button>
							<button class="btn-default btn">Cancel</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h2>Form Layout</h2>
			</div>
			<div class="panel-body">
				<h3 class="mt0">Input Addons and Icons</h3>
				<p class="mb20">Input addons with icons and validation states</p>
				<form role="form" class="form-horizontal">
					<div class="form-group">
						<label class="col-md-2 control-label">Email Address</label>
						<div class="col-md-8">
							<div class="input-group">							
								<span class="input-group-addon">
									<i class="fa fa-envelope-o"></i>
								</span>
								<input type="text" class="form-control" placeholder="Email Address">
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Password</label>
						<div class="col-md-8">
							<div class="input-group">
								<span class="input-group-addon">
									<i class="fa fa-key"></i>
								</span>
								<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Email Address</label>
						<div class="col-md-8">
							<div class="input-group input-icon right">
								<span class="input-group-addon">
									<i class="fa fa-envelope-o"></i>
								</span>
								<i class="fa fa-exclamation-circle tooltips" data-original-title="Invalid email!" data-container="body"></i>
								<input id="email" class="input-error form-control" type="text" placeholder="Email Address">
							</div>
						</div>
						<div class="col-sm-2">
							<p class="help-block">With tooltip</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Password</label>
						<div class="col-md-8">
							<div class="input-group input-icon right">
								<span class="input-group-addon">
									<i class="fa fa-key"></i>
								</span>
								<i class="fa fa-exclamation-circle tooltips" data-original-title="Password too long!" data-container="body"></i>
								<input type="password" class="input-error form-control" placeholder="Password">
							</div>
						</div>
						<div class="col-sm-2">
							<p class="help-block">With tooltip</p>
						</div>
					</div>
					<div class="form-group has-success">
						<label class="col-md-2 control-label">Input Addon Success</label>
						<div class="col-md-8">
							<div class="input-group input-icon right">
								<span class="input-group-addon">
									<i class="fa fa-envelope-o"></i>
								</span>
								<i class="fa fa-check-circle tooltips" data-original-title="Email is valid!" data-container="body"></i>
								<input id="email" class="input-error form-control" type="text" placeholder="Email Address">
							</div>
						</div>
						<div class="col-sm-2">
							<p class="help-block">Email is valid!</p>
						</div>
					</div>
					<div class="form-group has-error">
						<label class="col-md-2 control-label">Input Addon Error</label>
						<div class="col-md-8">
							<div class="input-group input-icon right">
								<span class="input-group-addon">
									<i class="fa fa-key"></i>
								</span>
								<i class="fa fa-exclamation-circle tooltips" data-original-title="Password too long!" data-container="body"></i>
								<input type="password" class="input-error form-control" placeholder="Password">
							</div>
						</div>
						<div class="col-sm-2">
							<p class="help-block">Error!</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Left Icon</label>
						<div class="col-md-8">
							<div class="input-icon">
								<i class="fa fa-fw fa-bell-o"></i>
								<input type="text" class="form-control" placeholder="Left icon">
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Right Icon</label>
						<div class="col-md-8">
							<div class="input-icon right">
								<i class="fa fa-fw fa-bell-o"></i>
								<input type="text" class="form-control" placeholder="Right icon">
							</div>
						</div>
						<div class="col-sm-2">
							<p class="help-block">Icon on right</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Checkbox Addon</label>
						<div class="col-md-8">
							<div class="input-group">
								<div class="input-group-addon"><input type="checkbox"></div>
								<input type="text" class="form-control">
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Checkbox Addon</label>
						<div class="col-md-8">
							<div class="input-group">
								<input type="text" class="form-control">
								<div class="input-group-addon"><input type="checkbox"></div>
								
							</div>
						</div>
						<div class="col-sm-2">
							<p class="help-block">Checkbox on right</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Radio Addon</label>
						<div class="col-md-8">
							<div class="input-group">
								<div class="input-group-addon"><input type="radio"></div>
								<input type="text" class="form-control">
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Radio Addon</label>
						<div class="col-md-8">
							<div class="input-group">
								<input type="text" class="form-control">
								<div class="input-group-addon"><input type="radio"></div>
								
							</div>
						</div>
						<div class="col-sm-2">
							<p class="help-block">Radio on right</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Input Processing</label>
						<div class="col-md-8">
							<div class="input-icon left spinner">
								<i class="fa fa-fw fa-spin fa-spinner"></i>
								<input id="email" class="input-error form-control" type="text" placeholder="Processing...">
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Input Processing</label>
						<div class="col-md-8">
							<div class="input-icon right spinner">
								<i class="fa fa-fw fa-spin fa-spinner"></i>
								<input id="email" class="input-error form-control" type="text" placeholder="Processing...">
							</div>
						</div>
						<div class="col-sm-2">
							<p class="help-block">Processing right</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Static Paragraph</label>
						<div class="col-md-8">
							<p class="form-control">email@example.com</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Readonly</label>
						<div class="col-md-8">
							<input type="text" class="form-control" placeholder="Readonly" readonly="">
						</div>
					</div>
				</form>
				<div class="panel-footer">
					<div class="row">
						<div class="col-sm-8 col-sm-offset-2">
							<button class="btn-success btn">Submit</button>
							<button class="btn-default btn">Cancel</button>
							<button class="btn-inverse btn">Reset</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="panel panel-default">
			<div class="panel-heading"><h2>Fluid Input Groups</h2></div>
			<div class="panel-body">
				<h3 class="mt0">Addon Groups</h3>
				<p class="mb20">Input group addons with buttons</p>
				<form role="form" class="form-horizontal">

					<div class="form-group">
						<label class="col-md-2 control-label">Button Left</label>
						<div class="col-md-8">
							<div class="input-group">
								<span class="input-group-btn">
									<button class="btn btn-default" type="button">Action</button>
								</span>
								<input type="text" class="form-control">
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Button Right</label>
						<div class="col-md-8">
							<div class="input-group">
								<input type="text" class="form-control">
								<span class="input-group-btn">
								<button class="btn btn-default" type="button">Action</button>
								</span>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-2 control-label">Button Left and Right</label>
						<div class="col-md-8">
							<div class="input-group">
								<span class="input-group-btn">
									<button class="btn btn-default" type="button">Action</button>
								</span>
								<input type="text" class="form-control">
								<span class="input-group-btn">
									<button class="btn btn-default" type="button">Action</button>
								</span>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-2 control-label">Dropdown Left</label>
						<div class="col-md-8">
							<div class="input-group">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-angle-down"></i></button>
									<ul class="dropdown-menu">
										<li><a href="#">Action </a></li>
										<li><a href="#">Another action </a></li>
										<li><a href="#">Something else here </a></li>
										<li class="divider"></li>
										<li><a href="#">Separated link </a></li>
									</ul>
								</div>
								<input type="text" class="form-control">
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Dropdown Right</label>
						<div class="col-md-8">
							<div class="input-group">
								<input type="text" class="form-control">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-angle-down"></i></button>
									<ul class="dropdown-menu">
										<li><a href="#">Action </a></li>
										<li><a href="#">Another action </a></li>
										<li><a href="#">Something else here </a></li>
										<li class="divider"></li>
										<li><a href="#">Separated link </a></li>
									</ul>
								</div>
								
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-2 control-label">Both Sides</label>
						<div class="col-md-8">
							<div class="input-group">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-angle-down"></i></button>
									<ul class="dropdown-menu">
										<li><a href="#">Action </a></li>
										<li><a href="#">Another action </a></li>
										<li><a href="#">Something else here </a></li>
										<li class="divider"></li>
										<li><a href="#">Separated link </a></li>
									</ul>
								</div>
								<input type="text" class="form-control">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-angle-down"></i></button>
									<ul class="dropdown-menu pull-right">
										<li><a href="#">Action </a></li>
										<li><a href="#">Another action </a></li>
										<li><a href="#">Something else here </a></li>
										<li class="divider"></li>
										<li><a href="#">Separated link </a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="col-md-2 control-label">Dropdown Group Left</label>
						<div class="col-md-8">
							<div class="input-group">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default" tabindex="-1">Action</button>
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
									<i class="fa fa-angle-down"></i>
									</button>
									<ul class="dropdown-menu" role="menu">
										<li><a href="#">Action </a></li>
										<li><a href="#">Another action </a></li>
										<li><a href="#">Something else here </a></li>
										<li class="divider"></li>
										<li><a href="#">Separated link </a></li>
									</ul>
								</div>
								<input type="text" class="form-control">
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">Dropdown Group Right</label>
						<div class="col-md-8">
							<div class="input-group">
								<input type="text" class="form-control">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default" tabindex="-1">Action</button>
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"><i class="fa fa-angle-down"></i></button>
									<ul class="dropdown-menu pull-right" role="menu">
										<li><a href="#">Action </a></li>
										<li><a href="#">Another action </a>
										</li><li><a href="#">Something else here </a></li>
										<li class="divider"></li>
										<li><a href="#">Separated link </a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group mb0">
						<label class="col-md-2 control-label">Both Sides</label>
						<div class="col-md-8">
							<div class="input-group">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default" tabindex="-1">Action</button>
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"><i class="fa fa-angle-down"></i></button>
									<ul class="dropdown-menu pull-right" role="menu">
										<li><a href="#">Action </a></li>
										<li><a href="#">Another action </a>
										</li><li><a href="#">Something else here </a></li>
										<li class="divider"></li>
										<li><a href="#">Separated link </a></li>
									</ul>
								</div>
								<input type="text" class="form-control">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default" tabindex="-1">Action</button>
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1"><i class="fa fa-angle-down"></i></button>
									<ul class="dropdown-menu pull-right" role="menu">
										<li><a href="#">Action </a></li>
										<li><a href="#">Another action </a>
										</li><li><a href="#">Something else here </a></li>
										<li class="divider"></li>
										<li><a href="#">Separated link </a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-xs-12">
		<div class="panel panel-default">
			<div class="panel-heading"><h2>Inline Forms</h2></div>
			<div class="panel-body">
				<form class="form-inline" role="form">
					<div class="row">
						<div class="col-md-6">
							<div class="form-group">
								<label class="sr-only" for="exampleInputEmail2">Email address</label>
								<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
							</div>
							<div class="form-group">
								<label class="sr-only" for="exampleInputPassword2">Password</label>
								<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
							</div>
							<label class="checkbox-inline"><input type="checkbox">Remember Me </label>
						</div>

						<div class="col-md-6">
							<button type="submit" class="btn btn-default">Sign in</button>
							<a href="#modal-form" class="btn btn-success" data-toggle="modal">Modal Form</a>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-xs-12">
		<div class="panel panel-default">
			<div class="panel-heading"><h2>Validation States</h2></div>
			<div class="panel-body pb0">
				<p class="mb20">Validation states with icons in left and right</p>
				<div class="row">
					<div class="col-md-6">

						<form>
							<div class="form-group">
								<div class="input-icon right">
									<i class="fa fa-fw fa-info-circle tooltips" data-original-title="Email address" data-container="body"></i>
									<input type="text" class="form-control" placeholder="Email address">
								</div>
							</div>
							<div class="form-group has-success">
								<div class="input-icon right">
									<i class="fa fa-fw fa-check-circle tooltips" data-original-title="You look OK!" data-container="body"></i>
									<input type="text" class="form-control" placeholder="Success!">
								</div>
							</div>
							<div class="form-group has-warning">
								<div class="input-icon right">
									<i class="fa fa-fw fa-warning tooltips" data-original-title="please provide an email" data-container="body"></i>
									<input type="text" class="form-control" placeholder="Warning!">
								</div>
							</div>
							<div class="form-group has-error">
								<div class="input-icon right">
									<i class="fa fa-fw fa-exclamation-circle tooltips" data-original-title="please write a valid email" data-container="body"></i>
									<input type="text" class="form-control" placeholder="Error!">
								</div>
							</div>
						</form>

					</div>
					<div class="col-md-6">

						<form>
							<div class="form-group">
								<div class="input-icon left">
									<i class="fa fa-fw fa-info-circle tooltips" data-original-title="Email address" data-container="body"></i>
									<input type="text" class="form-control" placeholder="Email address">
								</div>
							</div>
							<div class="form-group has-success">
								<div class="input-icon left">
									<i class="fa fa-fw fa-check-circle tooltips" data-original-title="You look OK!" data-container="body"></i>
									<input type="text" class="form-control" placeholder="Success!">
								</div>
							</div>
							<div class="form-group has-warning">
								<div class="input-icon left">
									<i class="fa fa-fw fa-warning tooltips" data-original-title="please provide an email" data-container="body"></i>
									<input type="text" class="form-control" placeholder="Warning!">
								</div>
							</div>
							<div class="form-group has-error">
								<div class="input-icon left">
									<i class="fa fa-fw fa-exclamation-circle tooltips" data-original-title="please write a valid email" data-container="body"></i>
									<input type="text" class="form-control" placeholder="Error!">
								</div>
							</div>
						</form>

					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">Sign in</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-6">
						<p>Sign in to meet your friends!</p>
						<form>
							<div class="form-group">
								<label for="">Email</label>
								<input type="email" class="form-control" placeholder="email@address.com">
							</div>
							<div class="form-group">
								<label for="">Password</label>
								<input type="password" class="form-control" placeholder="Enter Password">
							</div>
							<div class="clearfix">
								<div class="checkbox pull-left">
									<label for=""><input type="checkbox"> Remember Me</label>
								</div>
								<a href="#" class="btn btn-success pull-right">Log In</a>
							</div>
						</form>
					</div>
					<div class="col-xs-6">
						<h4>Not a Member?</h4>
						<p>You can create an account <a href="#">here</a>.</p>
						<p>OR</p>
						<a href="#" class="btn btn-primary btn-block"><i class="fa fa-facebook pull-left"></i> Sign in with Facebook</a>
						<a href="#" class="btn btn-info btn-block"><i class="fa fa-twitter pull-left"></i> Sign in with Twitter</a>
						<a href="#" class="btn btn-danger btn-block"><i class="fa fa-google-plus pull-left"></i> Sign in with Google+</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-xs-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h2>Grids</h2>
			</div>
			<div class="panel-body">
				<p class="mb20">Using <a href="scaffolding-grids.php">Grids</a>, any input box can be placed anywhere and be of any size!</p>
				<form>
					<div class="form-group">
						<div class="row">
							<div class="col-xs-12">
								<input type="text" class="form-control" placeholder=".col-xs-12">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="row">
							<div class="col-xs-2">
								<input type="text" class="form-control" placeholder=".col-xs-2">
							</div>
							<div class="col-xs-10">
								<input type="text" class="form-control" placeholder=".col-xs-10">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="row">
							<div class="col-xs-3">
								<input type="text" class="form-control" placeholder=".col-xs-3">
							</div>
							<div class="col-xs-9">
								<input type="text" class="form-control" placeholder=".col-xs-9">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="row">
							<div class="col-xs-4">
								<input type="text" class="form-control" placeholder=".col-xs-4">
							</div>
							<div class="col-xs-8">
								<input type="text" class="form-control" placeholder=".col-xs-8">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="row">
							<div class="col-xs-5">
								<input type="text" class="form-control" placeholder=".col-xs-5">
							</div>
							<div class="col-xs-7">
								<input type="text" class="form-control" placeholder=".col-xs-7">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="row">
							<div class="col-xs-6">
								<input type="text" class="form-control" placeholder=".col-xs-6">
							</div>
							<div class="col-xs-6">
								<input type="text" class="form-control" placeholder=".col-xs-6">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="row">
							<div class="col-xs-4">
								<input type="text" class="form-control" placeholder=".col-xs-4">
							</div>
							<div class="col-xs-4">
								<input type="text" class="form-control" placeholder=".col-xs-4">
							</div>
							<div class="col-xs-4">
								<input type="text" class="form-control" placeholder=".col-xs-4">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="row">
							<div class="col-xs-3">
								<input type="text" class="form-control" placeholder=".col-xs-3">
							</div>
							<div class="col-xs-6">
								<input type="text" class="form-control" placeholder=".col-xs-6">
							</div>
							<div class="col-xs-3">
								<input type="text" class="form-control" placeholder=".col-xs-3">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="row">
							<div class="col-xs-2">
								<input type="text" class="form-control" placeholder=".col-xs-2">
							</div>
							<div class="col-xs-8">
								<input type="text" class="form-control" placeholder=".col-xs-8">
							</div>
							<div class="col-xs-2">
								<input type="text" class="form-control" placeholder=".col-xs-2">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="row">
							<div class="col-xs-3">
								<input type="text" class="form-control" placeholder=".col-xs-3">
							</div>
							<div class="col-xs-3">
								<input type="text" class="form-control" placeholder=".col-xs-3">
							</div>
							<div class="col-xs-3">
								<input type="text" class="form-control" placeholder=".col-xs-3">
							</div>
							<div class="col-xs-3">
								<input type="text" class="form-control" placeholder=".col-xs-3">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="row">
							<div class="col-xs-5">
								<input type="text" class="form-control" placeholder=".col-xs-5">
							</div>
							<div class="col-xs-2">
								<input type="text" class="form-control" placeholder=".col-xs-2">
							</div>
							<div class="col-xs-5">
								<input type="text" class="form-control" placeholder=".col-xs-5">
							</div>
						</div>
					</div>
					<div class="form-group mb0">
						<div class="row">
							<div class="col-xs-2">
								<input type="text" class="form-control" placeholder=".col-xs-2">
							</div>
							<div class="col-xs-2">
								<input type="text" class="form-control" placeholder=".col-xs-2">
							</div>
							<div class="col-xs-2">
								<input type="text" class="form-control" placeholder=".col-xs-2">
							</div>
							<div class="col-xs-2">
								<input type="text" class="form-control" placeholder=".col-xs-2">
							</div>
							<div class="col-xs-2">
								<input type="text" class="form-control" placeholder=".col-xs-2">
							</div>
							<div class="col-xs-2">
								<input type="text" class="form-control" placeholder=".col-xs-2">
							</div>
						</div>
					</div>

				</form>
			</div>
		</div>
	</div>
</div>

{% endblock %}
