Input group component
Extending Form Controls input box as per input text
Input groups are created using the class .input-group. Further, use the class .input-group-prepend to place the addons before the input, whereas use the class .input-group-append to place the addons after the input and wrap the text or icon in a <span> and apply the class .input-group-text on it for proper rendering and styling.
Ex.
…
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<div class="row">
<div class="col-sm-4">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<span class="fa fa-user"></span>
</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" placeholder="US Dollar">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
Checkboxes and Radio Buttons Addons
Similarly, you can place checkbox or radio button within input group's addon instead of text.
Ex.
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<div class="row">
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<input type="checkbox">
</span>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<input type="radio">
</span>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
</form>
</div>
</body>
Placing Multiple Inputs or Addons
You can also place multiple inputs side-by-side within an input group easily, like this:
Ex.
…
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Your Name</span>
</div>
<input type="text" class="form-control" placeholder="First name">
<input type="text" class="form-control" placeholder="Last name">
</div>
</form>
</div>
</body>