show code
<div class="panel panel-light text-theme">
<div class="panel-heading">
<h3 class="panel-title">Basic Form</h3>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
show code
<div class="panel panel-light text-theme">
<div class="panel-heading">
<h3 class="panel-title">Horizontal Form</h3>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label col-sm-2">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
show code
<div class="panel panel-light text-theme">
<div class="panel-heading">
<h3 class="panel-title">Inline Form</h3>
</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail2" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
show code
<div class="panel panel-light text-theme">
<div class="panel-heading">
<h3 class="panel-title">Form with static text</h3>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<p>...</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label col-sm-2">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
</div>
</div>
show code
<div class="panel panel-light text-theme">
<div class="panel-heading">
<h3 class="panel-title">Form elements grid</h3>
</div>
<div class="panel-body">
<form>
<div class="row">
<div class="col-sm-2">
<input type="text" class="form-control">
</div>
<div class="col-sm-5">
<input type="text" class="form-control">
</div>
<div class="col-sm-5">
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row">
<div class="col-sm-2">
<textarea class="form-control"></textarea>
</div>
<div class="col-sm-5">
<textarea class="form-control"></textarea>
</div>
<div class="col-sm-5">
<textarea class="form-control"></textarea>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-2">
<select class="form-control">
<option>Select</option>
</select>
</div>
<div class="col-sm-5">
<select class="form-control">
<option>Select</option>
<option>Select</option>
<option>Select</option>
</select>
</div>
<div class="col-sm-5">
<select class="form-control">
<option>Select</option>
</select>
</div>
</div>
</form>
</div>
</div>
show code
<div class="panel panel-light text-theme">
<div class="panel-heading">
<h3 class="panel-title">Form with input group</h3>
</div>
<div class="panel-body">
<form>
<div class="row">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="US Dollar">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</form>
</div>
</div>
show code
<div class="panel panel-light text-theme">
<div class="panel-heading">
<h3 class="panel-title">Form with checkboxes</h3>
</div>
<div class="panel-body">
<form>
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
</div>
</div>
</form>
</div>
</div>
Form with input group button
show code
<div class="panel panel-light text-theme">
<div class="panel-heading">
<h3 class="panel-title">Form with input group button</h3>
</div>
<div class="panel-body">
<form>
<div class="row">
<div class="col-sm-5">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search…">
<span class="input-group-btn">
<button type="button" class="btn btn-default">Go</button>
</span>
</div>
</div>
<div class="col-sm-7">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type something…">
<span class="input-group-btn">
<button type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default">Options</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
Form with input group button and dropdown
show code
<div class="panel panel-light text-theme">
<div class="panel-heading">
<h3 class="panel-title">Form with input group button and dropdown</h3>
</div>
<div class="panel-body">
<form>
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-6">
<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">Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Form with input group btn and seperate dropdown
show code
<div class="panel panel-light text-theme">
<div class="panel-heading">
<h3 class="panel-title">Form with input group btn and seperate dropdown</h3>
</div>
<div class="panel-body">
<form>
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-default" type="button">Action</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-default" type="button">Action</button>
<button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
show code
<div class="panel panel-light text-theme">
<div class="panel-heading">
<h3 class="panel-title">Form alert-validation</h3>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">Username</label>
<div class="col-sm-10">
<input type="text" id="inputSuccess" class="form-control" placeholder="Input with success">
<span class="help-block">Username is available</span>
</div>
</div>
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">Password</label>
<div class="col-sm-10">
<input type="password" id="inputWarning" class="form-control" placeholder="Input with warning">
<span class="help-block">Password strength: Weak</span>
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">Email</label>
<div class="col-sm-10">
<input type="email" id="inputError" class="form-control" placeholder="Input with error">
<span class="help-block">Please enter a valid email address</span>
</div>
</div>
</form>
</div>
</div>
