    <ol class="breadcrumb">
		<li><a href="#/">Dashboard</a></li>
		<li>UI Elements</li>
		<li class="active">Forms</li>
	</ol>


<div class="container-fluid">
	<div class="alert alert-info">
		Use the <strong>same</strong> code as you would in <a class="alert-link" href="http://getbootstrap.com/" target="_blank">Twitter's Bootstrap</a>!
		<button type="button" class="close" data-dismiss="alert">&times;</button>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="panel panel-midnightblue" data-widget='{"draggable": "false"}'>
				<div class="panel-heading">
					<h2>Form Layout</h2>
					<!-- <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body, .panel-footer"}'></div> -->
					<div class="options">
						<ul class="nav nav-tabs">
			              <li><a data-target="#vertical-form" data-toggle="tab">Vertical Form</a></li>
			              <li class="active"><a data-target="#horizontal-form" data-toggle="tab">Horizontal Form</a></li>
			              <li><a data-target="#bordered-row" data-toggle="tab">Bordered Row</a></li>
			              <li><a data-target="#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 mb-n">
									<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>
				<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 class="row">
		<div class="col-sm-12">
			<div class="panel panel-default" data-widget='{"draggable": "false"}'>
				<div class="panel-heading">
					<h2>Form Layout</h2>
					<div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body, .panel-footer"}'></div>
				</div>
				<div class="panel-body">
					<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="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="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="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="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">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 right spinner">
									<i class="fa fa-fw fa-spin fa-spinner"></i>
									<input id="email" class="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 m-n">email@example.com</p>
							</div>
						</div>
						<div class="form-group mb-n">
							<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>
				<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 class="row">
		<div class="col-md-12">
			<div class="panel panel-default" data-widget='{"draggable": "false"}'>
				<div class="panel-heading">
					<h2>Fluid Input Groups</h2>
					<div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body, .panel-footer"}'></div>
				</div>
				<div class="panel-body">
					<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 mb-n">
							<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 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 class="row">
		<div class="col-xs-12">
			<div class="panel panel-default" data-widget='{"draggable": "false"}'>
				<div class="panel-heading">
					<h2>Inline Forms</h2>
					<div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div>
				</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 data-target="#modal-form" class="btn btn-success" data-toggle="modal">Modal Form</a>
							</div>
						</div>
					</form>
				</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">
			<panel panel-class="panel-primary" heading="Grids">
		        	<p>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">
							<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>
			</panel>
		</div>
	</div>

</div> <!-- container-fluid -->
