Bootstrap basic tutorial

Bootstrap plugins

Bootstrap Navigation Elements Bootstrap Button Dropdown Menu

Bootstrap Input Groups

This chapter will explain another feature supported by Bootstrap, the input group. The input group extends from Form controlsYou can easily add text or buttons as prefixes and suffixes to text-based input fields using the input group.

By adding prefix and suffix content to the input field, you can add common elements to the user input. For example, you can add a dollar sign, or add @ before a Twitter username, or other common elements required by the application interface.

To .form-control The steps to add prefix or suffix elements are as follows:

Place the prefix or suffix element inside a class .input-group Inside the <div> with class
Inside the same <div>, in the class .input-group-addon Place additional content inside the <span>.
Place the <span> before or after the <input> element.

To maintain cross-browser compatibility, avoid using the <select> element, as they cannot be fully rendered in WebKit browsers. Also, do not directly apply the input group class to the form group, as the input group is an isolated component.

Basic input group

The following example demonstrates the basic input group:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>
	<title>Bootstrap Example<　-　Basic input group</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>
<div style="padding:　100px　100px　10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="input-group">
			<span　class="input-group-addon">@</span>
			<input type="text" class="form-control"　placeholder="twitterhandle">
		</div>
		<br>
		<div class="input-group">
			<input type="text" class="form-control">
			<span　class="input-group-addon">.00</span>
		</div>
		<br>
		<div class="input-group">
			<span　class="input-group-addon">$</span>
			<input type="text" class="form-control">
			<span　class="input-group-addon">.00</span>
		</div>
	</form>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Input group size

You can change the size of the input group by adding .input-group Add relative class to form size (such as .input-group-lg、input-group-sm）to change the size of the input group. The content in the input box will automatically adjust the size.

The following example demonstrates this:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>
	<title>Bootstrap Example<　-　Input group size</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>
<div style="padding:　100px　100px　10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="input-group　input-group-lg">
			<span　class="input-group-addon">@</span>
			<input type="text" class="form-control"　placeholder="Twitterhandle">
		</div><br>
		<div class="input-group">
			<span　class="input-group-addon">@</span>
			<input type="text" class="form-control"　placeholder="Twitterhandle">
		</div><br>
		<div class="input-group　input-group-sm">
			<span　class="input-group-addon">@</span>
			<input type="text" class="form-control"　placeholder="Twitterhandle">
		</div>
	</form>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Checkbox and radio plugin

You can use the checkbox and radio plugin as a prefix or suffix element of the input group, as shown in the following example:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Bootstrap Example<　-　Input group checkbox and radio plugin</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>
<div style="padding:　100px　100px　10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-group">
					<span　class="input-group-addon">
						<input　type="checkbox">
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-group">
					<span　class="input-group-addon">
						<input　type="radio">
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

button plugin

You can also use the button as a prefix or suffix element of the input group, at this time you are not adding .input-group-addon class, you need to use class .input-group-btn to wrap the button. This is necessary because the default browser styles will not be overwritten. The following example demonstrates this:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Bootstrap Example<　-　Input group button plugin</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>
<div style="padding:　100px　100px　10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-group">
					<span　class="input-group-btn">
						<button　class="btn　btn-default"　type="button">
							Go!
						</button>
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-group">
					<input type="text" class="form-control">
					<span　class="input-group-btn">
						<button　class="btn　btn-default"　type="button">
							Go!
						</button>
					</span>
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

button with a dropdown menu

Add a button with a dropdown menu in the input group, which can be simply done by placing a .input-group-btn class" encapsulating the button and dropdown menu, as shown in the following example:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Bootstrap Example<　-　Dropdown menu button in the input group</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>
<div style="padding:　100px　100px　10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-group">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							Dropdown menu　
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="#">Feature</a></li>
							<li><a href="#">Another feature</a></li>
							<li><a href="#">Others</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated Links</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-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">
							Dropdown menu　
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Feature</a></li>
							<li><a href="#">Another feature</a></li>
							<li><a href="#">Others</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated Links</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Split dropdown menu button

Add a split button with a dropdown menu in the input group, using a style similar to the dropdown menu button, but adding the main functionality of the dropdown menu, as shown in the following example:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Bootstrap Example<　-　<title>Dropdown menu button split in input group</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>
<div style="padding:　100px　100px　10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-group">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">Dropdown menu
						</button>
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1>
							<span class="caret"></span>
							<span class="sr-only">Toggle dropdown menu</span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="#">Feature</a></li>
							<li><a href="#">Another feature</a></li>
							<li><a href="#">Others</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated Links</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-group">
					<input type="text" class="form-control">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">Dropdown menu
						</button>
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1>
							<span class="caret"></span>
							<span class="sr-only">Toggle dropdown menu</span>
						</button>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Feature</a></li>
							<li><a href="#">Another feature</a></li>
							<li><a href="#">Others</a></li>
							<li class="divider"></li>
							<li><a href="#">Separated Links</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>

Test and see ‹/›

The results are as follows:

Bootstrap Navigation Elements Bootstrap Button Dropdown Menu