Another feature supported by Bootstrap, input box groups. The input box group extends from the form control. With input box groups, it is easy to add text or buttons as prefixes and suffixes to text-based input boxes.
Add prefix and suffix to the input field
<div style="padding: 100px 100px 10px;"><form role="form"><div><span>@</span><input type="text" placeholder="twitterhandle"></div><br><div><input type="text"><span>.00</span></div><br><div><span>$</span><input type="text"><span>.00</span></div></form></div>
Check boxes and radio plugins are used as prefixes or suffix elements for input box groups
<div style="padding: 100px 100px 10px;"><form role="form"><div><div><div><span><input type="checkbox"></span><input type="text"></div><!-- /input-group --></div><!-- /.col-lg-6 --><br><div><div><div><span><input type="radio"></span><input type="text"></div><!-- /input-group --></div><!-- /.col-lg-6 --></div><!-- /.row --></form></div>
Buttons are used as prefix or suffix elements for input box groups
<div style="padding: 100px 100px 10px;"><form role="form"><div><div><div><span><button type="button">Go!</button></span><input type="text"></div><!-- /input-group --></div><!-- /.col-lg-6 --><br><div><div><input type="text"><span><button type="button">Go!</button></span></div><!-- /input-group --></div><!-- /.col-lg-6 --></div><!-- /.row --></form></div>class="input-group-btn"<div><div><button type="button" data-toggle="dropdown">Drop down menu<span></span></button><ul><li><a href="#">Function</a></li><li><a href="#">Other</a></li><li></li><li><a href="#">Other</a></li><li></li><li><a href="#">Other</a></li><li></li><li><a href="#">Disased link</a></li></ul></div><!-- /btn-group --><input type="text"></div><!-- /input-group --><div><div><button type="button" data-toggle="dropdown"><span></span> GO<span></span><ul><li>Drop-down menu title</li><li><a href="#">A</a></li><li><li><a href="#">B</a></li></ul> </div><input type="text"> </div><br><div><div><button type="button"><span></span> GO</button> <button type="button" data-toggle="dropdown"><span></span></button><ul><li>Drop-down menu title</li><li><a href="#">A</a></li><li><li><a href="#">B</a></li></ul> </div><input type="text"> </div><br>
The above is the code sharing of bootstrap input box group introduced by the editor. I hope it will be helpful to everyone!