<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Basic Input Group</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<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>
<br>
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<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" placeholder="US Dollar">
<span class="input-group-addon">.00</span>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Checkboxes and Radio Addons</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Button Addons</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Here">
<span class="input-group-btn">
<button type="button" class="btn btn-primary">Search</button>
</span>
</div>
<br>
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-info">Search</button>
</span>
<input type="text" class="form-control" placeholder="Search Here">
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Buttons with Dropdowns</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<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="#">Sample Text - 1</a></li>
<li><a href="#">Sample Text - 2</a></li>
<li><a href="#">SSample Text - 3</a></li>
<li class="divider"></li>
<li><a href="#">Sample Text - 4</a></li>
<li><a href="#">Sample Text - 5</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
<br>
<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="#">Sample Text - 1</a></li>
<li><a href="#">Sample Text - 2</a></li>
<li><a href="#">SSample Text - 3</a></li>
<li class="divider"></li>
<li><a href="#">Sample Text - 4</a></li>
<li><a href="#">Sample Text - 5</a></li>
</ul>
</div>
</div>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Segmented Dropdown Buttons</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">
<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="#">Sample Text - 1</a></li>
<li><a href="#">Sample Text - 2</a></li>
<li><a href="#">Sample Text - 3</a></li>
<li class="divider"></li>
<li><a href="#">Sample Text - 4</a></li>
<li><a href="#">Sample Text - 5</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
<br>
<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="#">Sample Text - 1</a></li>
<li><a href="#">Sample Text - 2</a></li>
<li><a href="#">Sample Text - 3</a></li>
<li class="divider"></li>
<li><a href="#">Sample Text - 4</a></li>
<li><a href="#">Sample Text - 5</a></li>
</ul>
</div>
</div>
</form>
</body>
</html>