Bootstrap - Input Groups

This chapter explains about one more feature Bootstrap supports, the Input Groups. Input groups are extended Form Controls. Using input groups you can easily prepend and append text or buttons to the text-based inputs.

By adding prepended and appended content to an input field, you can add common elements to the user’s input. For example, you can add the dollar symbol, the @ for a Twitter username, or anything else that might be common for your apppcation interface.

To prepend or append elements to a .form-control−

Wrap it in a <span> with class .input-group

As a next step, within that same <span> , place your extra content inside a <span> with class .input-group-addon.

Now place this <span> either before or after the <input> element.

For cross browser compatibipty, avoid using <select> elements here as they cannot be fully styled in WebKit browsers. Also do not apply input group classes directly to form groups. An input group is an isolated component.

Basic Input Group

The following example demonstrates basic input group −

<span style = "padding: 100px 100px 10px;">
   
   <form class = "bs-example bs-example-form" role = "form">
      <span class = "input-group">
         <span class = "input-group-addon">@</span>
         <input type = "text" class = "form-control" placeholder = "twitterhandle">
      </span>
		
      <br>

      <span class = "input-group">
         <input type = "text" class = "form-control">
         <span class = "input-group-addon">.00</span>
      </span>
		
      <br>
      
      <span class = "input-group">
         <span class = "input-group-addon">$</span>
         <input type = "text" class =" form-control">
         <span class = "input-group-addon">.00</span>
      </span>
   </form>
   
</span>