The `.input-group` div should be part of its own element instead of lumped in with `.col-xs-6`.  Remember, an `.input-group` div is taking the place of an input control.  So use them interchangeably.

**Instead of this**:



    <div class="col-sm-6 input-group">
        
        <span class="input-group-addon">Every</span>
        <input type="number" class="form-control" />
       
    </div>

**Do this**:



    <div class="col-sm-6 ">
      <div class="input-group">
        <span class="input-group-addon">Every</span>
        <input type="number" class="form-control" /> 
      </div>
    </div>


### Demo in Stack Snippets





    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <div class="container-fluid">
      <form role="form" class="form-horizontal">
        <div class="form-group">
          <label for="inputElementName" class="control-label col-sm-4">Element Name</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" id="inputElementName" placeholder="Enter name for element" />
          </div>
        </div>
        <div class="form-group">
          <label for="inputElementFrequency" class="control-label col-sm-4">Element Frequency</label>
          <div class="col-sm-6 ">
            <div class="input-group">
              <span class="input-group-addon">Every</span>
              <input type="number" class="form-control" id="inputElementFrequency" placeholder="Enter how often this element appears." /> <span class="input-group-addon">numbers</span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="inputElementData" class="control-label col-sm-4">Element Data</label>
          <div class="col-sm-6 ">
            <div class="input-group">
              <input type="number" class="form-control" id="inputElementData" placeholder="Enter this element's data." /> <span class="input-group-addon">Data</span>
            </div>
          </div>
        </div>
      </form>
    </div>

I've noticed that when using control group addons with Bootstrap that the total width of the control group is larger than those controls that do not have addons. This width change does not seem to be affected by the number of addons used.





    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
    <div class="container-fluid">
      <form role="form" class="form-horizontal">
        <div class="form-group">
          <label for="inputElementName" class="control-label col-sm-4">Element Name</label>
          <div class="col-sm-6">
            <input type="text" class="form-control" id="inputElementName" placeholder="Enter name for element" />
          </div>
        </div>
        <div class="form-group">
          <label for="inputElementFrequency" class="control-label col-sm-4">Element Frequency</label>
          <div class="col-sm-6 input-group"> <span class="input-group-addon">Every</span>
            <input type="number" class="form-control" id="inputElementFrequency" placeholder="Enter how often this element appears." /> <span class="input-group-addon">numbers</span>
          </div>
        </div>
        <div class="form-group">
          <label for="inputElementData" class="control-label col-sm-4">Element Data</label>
          <div class="col-sm-6 input-group">
            <input type="number" class="form-control" id="inputElementData" placeholder="Enter this element's data." /> <span class="input-group-addon">Data</span>
          </div>
        </div>
      </form>
    </div>



How can I ensure my controls fill the same width, regardless of addons?