Please wait...

Color options
Index variants
Components

Form

Form group

Example block-level help text here.

<form>
	<div class="form-group">
		<label>Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
	</div>
	<div class="form-group">
		<label>Password</label>
		<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
	</div>
	<div class="form-group">
		<label>Textarea</label>
		<textarea class="form-control" rows="8" id="exampleTextarea1" placeholder="Write something for us . . ."></textarea>
	</div>
	<div class="form-group">
		<label>File input</label>
		<input type="file" id="exampleInputFile">
		<p class="help-block">Example block-level help text here.</p>
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> Check me out
		</label>
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
</form>				
Inline form
<form class="form-inline">
	<div class="form-group">
		<label class="sr-only">Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
	</div>
	<div class="form-group">
		<label class="sr-only">Password</label>
		<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
	</div>
	<div class="checkbox">
		<label>
		<input type="checkbox"> Remember me
		</label>
	</div>
</form>				
Horizontal form
<form class="form-horizontal">
	<div class="form-group">
		<label  class="col-sm-2 control-label">Email</label>
		<div class="col-sm-10">
		<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">Password</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label">Textarea</label>
		<div class="col-sm-10">
			<textarea class="form-control" rows="8" id="exampleTextarea2" placeholder="Write something for us . . ."></textarea>
		</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-default">Sign in</button>
		</div>
	</div>
</form>				
Form size
<form>
	<div class="form-group">
		<label>Default</label>
		<input type="email" class="form-control" placeholder="Form default size">
	</div>
	<div class="form-group">
		<label>Large</label>
		<input type="email" class="form-control input-lg" placeholder="Form large size">
	</div>
</form>