title: How to achive a responsive behaviour in an input group
body: <p>My HTML looks like this:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;
          &lt;div class="input-group"&gt;
              &lt;div class="input-group-btn"&gt;
                  &lt;button type="button" class="btn btn-default  fa fa-check-square" data-toggle-tooltip="tooltip"
                              title="Toggle All" id="btnItemgridSelectAll" tabindex="5"&gt;
                  &lt;/button&gt;
                  &lt;button type="button" id="BtnAddPayment" class="btn btn-default BtnColor fa fa-plus-square" data-toggle-tooltip="tooltip"
                              title="Add New Row" tabindex="6"&gt;
                  &lt;/button&gt;
                  &lt;button type="button" id="btnDelete" class="btn btn-default BtnColor fa fa-trash-o" data-toggle-tooltip="tooltip"
                              title="Delete Selected Row" tabindex="7"&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;label  class="input-group-addon" &gt;LongText1111111&lt;/label&gt;
  
              &lt;input class="form-control" type="text" /&gt;
  
              &lt;label  class="input-group-addon" &gt;LongText2222222&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When viewing the layout in small screen resolutions the controls inside the input-group don't wrap.</p>
  
  <p>Please help me.</p>