Bootstrap Input Groups

This article explains about one more feature Bootstrap supports, the Input Groups. Input groups are extended Form Controls. Using input groups we can easily prepend and append text or buttons to text-based inputs. By adding prepended and appended content to an input field, we can add common elements to the user’s input. To prepend or append elements to a .form-control Wrap it in a <div> with class .input-group
As a next step, within that same <div> , place your extra content inside a <span> with class .input-group-addon. Now place this <span> either before or after the <input> element.
Basic Input Group
Following examples demonstrates basic input group:

<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">
      </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>

Input Group Sizing
We can also change the size of the input groups, by adding the relative form sizing classes like .input-group-lg, input-group-sm, input-group-xs to the .input-group itself. The contents within will automatically resize.
Following examples demonstrates this:

<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">
      </div><br>
      <div class="input-group">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control">
      </div><br>
      <div class="input-group input-group-sm">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control">
      </div>
   </form>
</div>

Checkboxes and radio Buttons:
We can preappend or append radio buttons and checkboxes instead of text as demonstrated in the following example:

<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>

Buttons:
We can even preappend or append buttons in input groups. Instead of .input-group-addon class, we’ll need to use class .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden. Following examples demonstrates this:

<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>

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

2 thoughts on “Bootstrap Input Groups

Leave a Reply

Your email address will not be published. Required fields are marked *