English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Forms

In this chapter, we will learn how to create forms using Bootstrap. Bootstrap can create different styles of forms with some simple HTML tags and extended classes.

Form Layout

Bootstrap provides the following types of form layouts:

  • Vertical Form (default)

  • Inline form

  • Horizontal form

Vertical or Basic Form

The basic form structure is built-in to Bootstrap, and individual form controls automatically receive some global styles. The following lists the steps to create a basic form:

  • Add to the parent <form> element role="form".

  • Place the label and control in a class .form-group within the <div>. This is necessary to achieve the best spacing.

  • Add class =" to all text elements <input>, <textarea>, and <select>form-control" .

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Basic Form</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Name</label>
		<input type="text" class="form-control"　id="name"　
			　　　placeholder="Please enter the name">
	</div>
	<div class="form-group">
		<label for="inputfile">File Input</label>
		<input　type="file"　id="inputfile">
		<p　class="help"-block">Here is an example of block-level help text.</p>
	</div>
	<div class="checkbox">
		<label>
			<input　type="checkbox">　Tick
		</label>
	</div>
	<button　type="submit"　class="btn　btn-default">Submit</button>
</form>
</body>
</html>
Test and see ‹/›

The results are as follows:

Inline form

If you need to create a form where all elements are inline, aligned to the left, and the labels are side by side, add the class to the <form> tag .form-inline.

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Inline form</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-inline"　role="form">
	<div class="form-group">
		<label　class="sr-only"　for="name">Name</label>
		<input type="text" class="form-control"　id="name"　
			　　　placeholder="Please enter the name">
	</div>
	<div class="form-group">
		<label　class="sr-only"　for="inputfile">File input</label>
		<input　type="file"　id="inputfile">
	</div>
	<div class="checkbox">
		<label>
			<input　type="checkbox">　Tick
		</label>
	</div>
	<button　type="submit"　class="btn　btn-default">Submit</button>
</form>
</body>
</html>
Test and see ‹/›

The results are as follows:

  • By default, Bootstrap's input, select and textarea have 100% width. When using inline forms, you need to set a width on the form controls.

  • Use class .sr-only，you can hide the labels of inline forms.

Horizontal form

Horizontal forms are different from other forms not only in the number of tags but also in the presentation of the form. To create a horizontal layout form, please follow the following steps:

  • Add class to the parent <form> element .form-horizontal.

  • Place the label and control in a class .form-group in the <div>.

  • Add class to the label .control-label.

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Horizontal form</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div class="form-group">
		<label　for="firstname"　class="col-sm-2　control-label">Name</label>
		<div class="col-sm-10">
			<input type="text" class="form-control"　id="firstname"　
				　　　placeholder="Please enter your name">
		</div>
	</div>
	<div class="form-group">
		<label　for="lastname"　class="col-sm-2　control-label">Surname</label>
		<div class="col-sm-10">
			<input type="text" class="form-control"　id="lastname"　
				　　　placeholder="Please enter your surname">
		</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">Login</button>
		</div>
	</div>
</form>
</body>
</html>
Test and see ‹/›

The results are as follows:

Supported form controls

Bootstrap supports the most common form controls, mainly input, textarea, checkbox, radio and select.

Input box (Input)

The most common form text field is the input box input. Users can enter most of the necessary form data. Bootstrap provides support for all native HTML5 support for input types, including:text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel and color. Appropriate type declaration is required so that it can be input to get complete styles.

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Input box</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Label</label>
		<input type="text" class="form-control" placeholder="Text input">
	</div>
　</form>
</body>
</html>
Test and see ‹/›

The results are as follows:

Text box (Textarea)

Use the text box textarea when you need to enter multiple lines of text. You can change it rows attribute (fewer rows = smaller box, more rows = larger box).

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Text box</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Text box</label>
		<textarea class="form-control" rows="3></textarea>
	</div>
</form>
</body>
</html>
Test and see ‹/›

The results are as follows:

Checkbox (Checkbox) and radio button (Radio)

Checkboxes and radio buttons are used to allow users to select from a series of preset options.

  • . When creating a form, if you want users to select multiple options from a list, please use checkbox. If you want to limit users to select only one option, please use radio.

  • to be used for a series of checkboxes and radio buttons .checkbox-inline or .radio-inline class, controls them to be displayed on the same line.

The following examples demonstrate both types (default and inline):

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Checkboxes and radio buttons</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<label for="name">Example of default checkboxes and radio buttons</label>
<div class="checkbox">
	<label><input type="checkbox" value="">Option　1</label>
</div>
<div class="checkbox">
	<label><input type="checkbox" value="">Option　2</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option　1
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option　2　-　Selecting it will deselect the option　1
	</label>
</div>
<label for="name">Example of inline checkboxes and radio buttons</label>
<div>
	<label class="checkbox"-inline">
		<input type="checkbox" id="inlineCheckbox"}1" value="option1">Option　1
	</label>
	<label class="checkbox"-inline">
		<input type="checkbox" id="inlineCheckbox"}2" value="option2">Option　2
	</label>
	<label class="checkbox"-inline">
		<input type="checkbox" id="inlineCheckbox"}3" value="option3">Option　3
	</label>
	<label class="radio-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked>Option　1
	</label>
	<label class="radio-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2">Option　2
	</label>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Selection box (Select)

When you want users to select multiple options but can only select one option by default, use a selection box.

  • Use <select> to display list options, which are usually those user-familiar selection lists, such as states or numbers.

  • Use multiple="multiple" Allow users to select multiple options.

The following example demonstrates these two types (select and multiple):

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　Select box/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<label for="name">Option list</label>
		<select class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<label for="name">Multi-selectable option list</label>
		<select multiple class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</div>
</form>
</body>
</html>
Test and see ‹/›

The results are as follows:

static control

When you need to place plain text after the form label within a horizontal form, use the class on <p>. .form-control-static.

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　static control/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div class="form-group">
		<label　class="col-sm-2　control-label">Email</label>
		<div class="col-sm-10">
			<p class="form-control-static">[email protected]</p>
		</div>
	</div>
	<div class="form-group">
		<label　for="inputPassword"　class="col-sm-2　control-label">Password</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword"　
				　　　placeholder="Please enter password">
		</div>
	</div>
</form>
</body>
</html>
Test and see ‹/›

The results are as follows:

form control states

In addition to :focus state (that is, when the user clicks on the input or uses the tab key to focus on the input), Bootstrap also defines styles for disabled input boxes and provides form validation classes.

input box focus

when the input box receives :focus at the same time, the outline of the input box will be removed and box-shadow.

Disabled input box

If you want to disable an input box, simply add disabled The attribute not only disables the input box but also changes the style of the input box and the style of the mouse pointer when it hovers over the element.

Disabled fieldset

Add the disabled attribute to <fieldset> to disable all controls within <fieldset>.

Validation States

Bootstrap includes validation styles for error, warning, and success messages. Simply add an appropriate class to the parent element (.has-warning, .has-error or .has-success）can be used for validation states.

The following examples demonstrate all control states:

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Form Control States</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form　class="form-horizontal"　role="form">
	<div class="form-group">
		<label　class="col-sm-2　control-label">Focus</label>
		<div class="col-sm-10">
			<input class="form-control"　id="focusedInput"　type="text"　　value="This input box gets focus...">
		</div>
	</div>
	<div class="form-group">
		<label　for="inputPassword"　class="col-sm-2　control-label">
			Disable
		</label>
		<div class="col-sm-10">
			<input class="form-control"　id="disabledInput"　type="text"　placeholder="This input box is prohibited from input..."　disabled>
		</div>
	</div>
	<fieldset　disabled>
		<div class="form-group">
			<label　for="disabledTextInput"　　class="col-sm-2　control-label">Disable Input (Fieldset Disabled)
			</label>
			<div class="col-sm-10">
				<input　type="text"　id="disabledTextInput"　class="form-control"　　placeholder="Prohibit Input">
			</div>
		</div>
		<div class="form-group">
			<label　for="disabledSelect"　　class="col-sm-2　control-label">Disable Selection Menu (Fieldset Disabled)
			</label>
			<div class="col-sm-10">
				<select　id="disabledSelect"　class="form-control">
					<option>Prohibit Selection</option>
				</select>
			</div>
		</div>
	</fieldset>
	<div class="form-group　has-success">
		<label　class="col-sm-2　control-label"　for="inputSuccess">
			Input Success
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control"　id="inputSuccess">
		</div>
	</div>
	<div class="form-group　has-warning">
		<label　class="col-sm-2　control-label"　for="inputWarning">
			Input Warning
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control"　id="inputWarning">
		</div>
	</div>
	<div class="form-group　has-error">
		<label　class="col-sm-2　control-label"　for="inputError">
			Input error
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputError">
		</div>
	</div>
</form>
</body>
</html>
Test and see ‹/›

The results are as follows:

Form control size

You can use class .input-lg and .col-lg-* to set the height and width of the form. The following example demonstrates this:

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Form control size</title>
	<link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<input class="form-control input-lg" type="text" placeholder=".input-lg">
	</div>
	<div class="form-group">
		<input class="form-control" type="text" placeholder="Default input">
	</div>
	<div class="form-group">
		<input class="form-control input-sm" type="text" placeholder=".input-sm">
	</div>
	<div class="form-group">
	</div>
	<div class="form-group">
		<select class="form-control input-lg">
			<option value="">.input-lg</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control">
			<option value="">Default selection</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control input-sm">
			<option value="">.input-sm</option>
		</select>
	</div>
	<div class="row">
		<div class="col-lg-2">
			<input type="text" class="form-control" placeholder=".col-lg-2">
		</div>
		<div class="col-lg-3">
			<input type="text" class="form-control" placeholder=".col-lg-3">
		</div>
		<div class="col-lg-4">
			<input type="text" class="form-control" placeholder=".col-lg-4">
		</div>
	</div>
</form>
</body>
</html>
Test and see ‹/›

The results are as follows:

Form help text

Bootstrap form controls can have a block-level help text on the input box input. To add a content block that spans the entire width, use the following after <input>: .help-blockThe following example demonstrates this:

Online example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Form help text</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<span>Help text example</span>
	<input class="form-control" type="text" placeholder="">
	<span class="help-block">A longer help text block, more than one line,
		Need to be expanded to the next line. The help text in this example has two lines in total.</span>
</form>
</body>
</html>
Test and see ‹/›

The results are as follows:

Bootstrap ButtonsBootstrap Tables