Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Table of Content

Overview

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

We'll never share your email with anyone else. 
								
									<form>
										<div class="form-group">
											<label for="exampleInputEmail1">Email address</label>
											<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
											<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
										</div>
										<div class="form-group">
											<label for="exampleInputPassword1">Password</label>
											<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
										</div>
										<div class="form-check">
											<input type="checkbox" class="form-check-input" id="exampleCheck1">
											<label class="form-check-label" for="exampleCheck1">Check me out</label>
										</div>
										<button type="submit" class="btn btn-primary">Submit</button>
									</form>

Form Controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Be sure to explore our custom forms to further style <select>s.

								
									<form>
										<div class="form-group">
											<label for="exampleFormControlInput1">Email address</label>
											<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
										</div>
										<div class="form-group">
											<label for="exampleFormControlSelect1">Example select</label>
											<select class="form-control" id="exampleFormControlSelect1">
												<option>1</option>
												<option>2</option>
												<option>3</option>
												<option>4</option>
												<option>5</option>
											</select>
										</div>
										<div class="form-group">
											<label for="exampleFormControlSelect2">Example multiple select</label>
											<select multiple="" class="form-control" id="exampleFormControlSelect2">
												<option>1</option>
												<option>2</option>
												<option>3</option>
												<option>4</option>
												<option>5</option>
											</select>
										</div>
										<div class="form-group">
											<label for="exampleFormControlTextarea1">Example textarea</label>
											<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
										</div>
									</form>

Examples

States
Please provide a valid informations. 
								
									<div class="form-group has-success">
										<label for="successInput">Success Input</label>
										<input type="text" id="successInput" value="Success" class="form-control">
									</div>

									<div class="form-group has-error has-feedback">
										<label for="errorInput">Error Input</label>
										<input type="text" id="errorInput" value="Error" class="form-control">
										<small id="emailHelp" class="form-text text-muted">Please provide a valid informations.</small>
									</div>
Input with Icon
								
									<div class="input-group">
										<div class="input-group-prepend">
											<span class="input-group-text">
											<i class="flaticon-user"></i>
											</span>
										</div>
										<input type="text" class="form-control" placeholder="Input With Icon">
									</div>
Form Control Styles
								
									<div class="form-group">
										<label for="squareInput">Square Input</label>
										<input type="text" class="form-control input-square" id="squareInput" placeholder="Square Input">
									</div>

									<div class="form-group">
										<label for="squareSelect">Square Select</label>
										<select class="form-control input-square" id="squareSelect">
											<option>1</option>
											<option>2</option>
											<option>3</option>
											<option>4</option>
											<option>5</option>
										</select>
									</div>

									<div class="form-group">
										<label for="pillInput">Pill Input</label>
										<input type="text" class="form-control input-pill" id="pillInput" placeholder="Pill Input">
									</div>

									<div class="form-group">
										<label for="pillSelect">Pill Select</label>
										<select class="form-control input-pill" id="pillSelect">
											<option>1</option>
											<option>2</option>
											<option>3</option>
											<option>4</option>
											<option>5</option>
										</select>
									</div>

									<div class="form-group">
										<label for="solidInput">Solid Input</label>
										<input type="text" class="form-control input-solid" id="solidInput" placeholder="Solid Input">
									</div>

									<div class="form-group">
										<label for="solidSelect">Solid Select</label>
										<select class="form-control input-solid" id="solidSelect">
											<option>1</option>
											<option>2</option>
											<option>3</option>
											<option>4</option>
											<option>5</option>
										</select>
									</div>
Form Group Styles
								
									<label class="mb-3"><b>Form Group Default</b></label>
									<div class="form-group form-group-default">
										<label>Input</label>
										<input id="Name" type="text" class="form-control" placeholder="Fill Name">
									</div>

									<div class="form-group form-group-default">
										<label>Select</label>
										<select class="form-control" id="formGroupDefaultSelect">
											<option>1</option>
											<option>2</option>
											<option>3</option>
											<option>4</option>
											<option>5</option>
										</select>
									</div>

									<label class="mt-3 mb-3"><b>Form Floating Label</b></label>
									<div class="form-group form-floating-label">
										<input id="inputFloatingLabel" type="text" class="form-control input-border-bottom" required="">
										<label for="inputFloatingLabel" class="placeholder">Input</label>
									</div>

									<div class="form-group form-floating-label">
										<select class="form-control input-border-bottom" id="selectFloatingLabel" required="">
											<option></option>
											<option>1</option>
											<option>2</option>
											<option>3</option>
											<option>4</option>
											<option>5</option>
										</select>
										<label for="selectFloatingLabel" class="placeholder">Select</label>
									</div>

									<div class="form-group form-floating-label">
										<input id="inputFloatingLabel2" type="text" class="form-control input-solid" required="">
										<label for="inputFloatingLabel2" class="placeholder">Input</label>
									</div>

									<div class="form-group form-floating-label">
										<select class="form-control input-solid" id="selectFloatingLabel2" required="">
											<option></option>
											<option>1</option>
											<option>2</option>
											<option>3</option>
											<option>4</option>
											<option>5</option>
										</select>
										<label for="selectFloatingLabel2" class="placeholder">Select</label>
									</div>

Input Group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

@
@example.com
https://example.com/users/
$
.00
With textarea
Action Another action Something else here Separated link 
								
									<div class="form-group">
										<div class="input-group mb-3">
											<div class="input-group-prepend">
												<span class="input-group-text" id="basic-addon1">@</span>
											</div>
											<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
										</div>
									</div>

									<div class="form-group">
										<div class="input-group mb-3">
											<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
											<div class="input-group-append">
												<span class="input-group-text" id="basic-addon2">@example.com</span>
											</div>
										</div>
									</div>

									<div class="form-group">
										<label for="basic-url">Your vanity URL</label>
										<div class="input-group mb-3">
											<div class="input-group-prepend">
												<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
											</div>
											<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
										</div>
									</div>

									<div class="form-group">
										<div class="input-group mb-3">
											<div class="input-group-prepend">
												<span class="input-group-text">$</span>
											</div>
											<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
											<div class="input-group-append">
												<span class="input-group-text">.00</span>
											</div>
										</div>
									</div>

									<div class="form-group">
										<div class="input-group">
											<div class="input-group-prepend">
												<span class="input-group-text">With textarea</span>
											</div>
											<textarea class="form-control" aria-label="With textarea"></textarea>
										</div>
									</div>

									<div class="form-group">
										<div class="input-group">
											<div class="input-group-prepend">
												<button class="btn btn-default btn-border" type="button">Button</button>
											</div>
											<input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
										</div>
									</div>

									<div class="form-group">
										<div class="input-group">
											<input type="text" class="form-control" aria-label="Text input with dropdown button">
											<div class="input-group-append">
												<button class="btn btn-primary btn-border dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
												<div class="dropdown-menu">
													<a class="dropdown-item" href="#">Action</a>
													<a class="dropdown-item" href="#">Another action</a>
													<a class="dropdown-item" href="#">Something else here</a>
													<div role="separator" class="dropdown-divider"></div>
													<a class="dropdown-item" href="#">Separated link</a>
												</div>
											</div>
										</div>
									</div>

									<div class="form-group">
										<div class="input-icon">
											<input type="text" class="form-control" placeholder="Search for...">
											<span class="input-icon-addon">
												<i class="fa fa-search"></i>
											</span>
										</div>
									</div>

									<div class="form-group">
										<div class="input-icon">
											<span class="input-icon-addon">
												<i class="fa fa-user"></i>
											</span>
											<input type="text" class="form-control" placeholder="Username">
										</div>
									</div>

Image Check

								
									<div class="row">
										<div class="col-6 col-sm-4">
											<label class="imagecheck mb-4">
												<input name="imagecheck" type="checkbox" value="1" class="imagecheck-input">
												<figure class="imagecheck-figure">
													<img src="/assets/img/examples/product1.jpg" alt="title" class="imagecheck-image">
												</figure>
											</label>
										</div>
										<div class="col-6 col-sm-4">
											<label class="imagecheck mb-4">
												<input name="imagecheck" type="checkbox" value="2" class="imagecheck-input" checked="">
												<figure class="imagecheck-figure">
													<img src="/assets/img/examples/product4.jpg" alt="title" class="imagecheck-image">
												</figure>
											</label>
										</div>
										<div class="col-6 col-sm-4">
											<label class="imagecheck mb-4">
												<input name="imagecheck" type="checkbox" value="3" class="imagecheck-input">
												<figure class="imagecheck-figure">
													<img src="/assets/img/examples/product3.jpg" alt="title" class="imagecheck-image">
												</figure>
											</label>
										</div>
									</div>

Color Input

								
									<div class="form-group">
										<label class="form-label">Color Input</label>
										<div class="row gutters-xs">
											<div class="col-auto">
												<label class="colorinput">
													<input name="color" type="checkbox" value="dark" class="colorinput-input">
													<span class="colorinput-color bg-dark"></span>
												</label>
											</div>
											<div class="col-auto">
												<label class="colorinput">
													<input name="color" type="checkbox" value="primary" class="colorinput-input">
													<span class="colorinput-color bg-primary"></span>
												</label>
											</div>
											<div class="col-auto">
												<label class="colorinput">
													<input name="color" type="checkbox" value="secondary" class="colorinput-input">
													<span class="colorinput-color bg-secondary"></span>
												</label>
											</div>
											<div class="col-auto">
												<label class="colorinput">
													<input name="color" type="checkbox" value="info" class="colorinput-input">
													<span class="colorinput-color bg-info"></span>
												</label>
											</div>
											<div class="col-auto">
												<label class="colorinput">
													<input name="color" type="checkbox" value="success" class="colorinput-input">
													<span class="colorinput-color bg-success"></span>
												</label>
											</div>
											<div class="col-auto">
												<label class="colorinput">
													<input name="color" type="checkbox" value="danger" class="colorinput-input">
													<span class="colorinput-color bg-danger"></span>
												</label>
											</div>
											<div class="col-auto">
												<label class="colorinput">
													<input name="color" type="checkbox" value="warning" class="colorinput-input">
													<span class="colorinput-color bg-warning"></span>
												</label>
											</div>
										</div>
									</div>

Select Group

								
								<div class="form-group">
									<label class="form-label">Size</label>
									<div class="selectgroup w-100">
										<label class="selectgroup-item">
											<input type="radio" name="value" value="50" class="selectgroup-input" checked="">
											<span class="selectgroup-button">S</span>
										</label>
										<label class="selectgroup-item">
											<input type="radio" name="value" value="100" class="selectgroup-input">
											<span class="selectgroup-button">M</span>
										</label>
										<label class="selectgroup-item">
											<input type="radio" name="value" value="150" class="selectgroup-input">
											<span class="selectgroup-button">L</span>
										</label>
										<label class="selectgroup-item">
											<input type="radio" name="value" value="200" class="selectgroup-input">
											<span class="selectgroup-button">XL</span>
										</label>
									</div>
								</div>

								<div class="form-group">
									<label class="form-label">Icons input</label>
									<div class="selectgroup w-100">
										<label class="selectgroup-item">
											<input type="radio" name="transportation" value="2" class="selectgroup-input">
											<span class="selectgroup-button selectgroup-button-icon"><i class="icon-screen-smartphone"></i></span>
										</label>
										<label class="selectgroup-item">
											<input type="radio" name="transportation" value="1" class="selectgroup-input" checked="">
											<span class="selectgroup-button selectgroup-button-icon"><i class="icon-screen-tablet"></i></span>
										</label>
										<label class="selectgroup-item">
											<input type="radio" name="transportation" value="6" class="selectgroup-input">
											<span class="selectgroup-button selectgroup-button-icon"><i class="icon-screen-desktop"></i></span>
										</label>
										<label class="selectgroup-item">
											<input type="radio" name="transportation" value="6" class="selectgroup-input">
											<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-times"></i></span>
										</label>
									</div>
								</div>

								<div class="form-group">
									<label class="form-label d-block">Icon input</label>
									<div class="selectgroup selectgroup-secondary selectgroup-pills">
										<label class="selectgroup-item">
											<input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
											<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-sun"></i></span>
										</label>
										<label class="selectgroup-item">
											<input type="radio" name="icon-input" value="2" class="selectgroup-input">
											<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-moon"></i></span>
										</label>
										<label class="selectgroup-item">
											<input type="radio" name="icon-input" value="3" class="selectgroup-input">
											<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-tint"></i></span>
										</label>
										<label class="selectgroup-item">
											<input type="radio" name="icon-input" value="4" class="selectgroup-input">
											<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-cloud"></i></span>
										</label>
									</div>
								</div>

								<div class="form-group">
									<label class="form-label">Your skills</label>
									<div class="selectgroup selectgroup-pills">
										<label class="selectgroup-item">
											<input type="checkbox" name="value" value="HTML" class="selectgroup-input" checked="">
											<span class="selectgroup-button">HTML</span>
										</label>
										<label class="selectgroup-item">
											<input type="checkbox" name="value" value="CSS" class="selectgroup-input">
											<span class="selectgroup-button">CSS</span>
										</label>
										<label class="selectgroup-item">
											<input type="checkbox" name="value" value="PHP" class="selectgroup-input">
											<span class="selectgroup-button">PHP</span>
										</label>
										<label class="selectgroup-item">
											<input type="checkbox" name="value" value="JavaScript" class="selectgroup-input">
											<span class="selectgroup-button">JavaScript</span>
										</label>
										<label class="selectgroup-item">
											<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
											<span class="selectgroup-button">Ruby</span>
										</label>
										<label class="selectgroup-item">
											<input type="checkbox" name="value" value="Ruby" class="selectgroup-input">
											<span class="selectgroup-button">Ruby</span>
										</label>
										<label class="selectgroup-item">
											<input type="checkbox" name="value" value="C++" class="selectgroup-input">
											<span class="selectgroup-button">C++</span>
										</label>
									</div>
								</div>