How do I create a button group with a select, button, button-dropdown and addon with bootstrap

Question

I am trying to create a a group of controls with bootstrap however it does not seem to be rendering properly, I have an example here: https://jsfiddle.net/brightertools/jxafnoyx/

Code:

<form id="form" name="form" action="" method="post">
    <div class="container">
        <div class="form-group">
            <label class="control-label" for="SelectOption">Select an Option</label>
            <div class="input-group">
                <select id="SelectOption" name="SelectOption" class="form-control">
                    <option value="">(select your option)</option>
                </select>
                <div class="input-group-btn ">
                    <button type="button" class="btn btn-default glyphicon glyphicon-plus" style="margin-top:-1px;" id="AddButton"></button>
                    <button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-cog" style="margin-top:-1px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="GroupDropdown"></button>
                    <ul class="dropdown-menu">
                        <li><a id="EditLink">Edit</a>
                        </li>
                        <li><a id="DeleteLink">Delete</a>
                        </li>
                    </ul> <span class="input-group-addon"><span class="validation-icon glyphicon glyphicon-asterisk"></span></span>
                </div>
            </div>
        </div>
    </div>
</form>

One can see that the addon is wrapping, I cannot seem to fix this issue.

Current rendering within jsfiddle:

Answer 1

As Onkar Deshpande mentioned correctly in his comment

"multiple form-controls in a single input group are not supported".

Input groups

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

We do not support multiple add-ons on a single side.

We do not support multiple form-controls in a single input group.

But there is a little work around you could use to make this work. Just make sure to move your input-group-addon out of the input-group-btn div.

To make this look correct you would have to also remove the border-radius on the .btn class.

.btn {
  border-radius: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<form id="form" name="form" action="" method="post">
  <div class="container">
    <div class="form-group">
      <label class="control-label" for="SelectOption">Select an Option</label>
      <div class="input-group">
        <select id="SelectOption" name="SelectOption" class="form-control">
          <option value="">(select your option)</option>
        </select>
        <div class="input-group-btn ">
          <button type="button" class="btn btn-default glyphicon glyphicon-plus" style="margin-top:-1px;" id="AdvertiserEditButton"></button>

          <button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-cog" style="margin-top:-1px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="AdvertiserDropdown"></button>
          <ul class="dropdown-menu">
            <li><a id="AdvertiserEditLink">Edit</a>
            </li>
            <li><a id="AdvertiserDeleteLink">Delete</a>
            </li>
          </ul>                      
        </div>
        <span class="input-group-addon"><span class="validation-icon glyphicon glyphicon-asterisk"></span></span>
      </div>
    </div>
  </div>
</form>

Answer 2

You can try like this: Demo

<div class="input-group">
    <select id="SelectOption" name="SelectOption" class="form-control">
                    <option value="">(select your option)</option>
                </select>   
          <div class="input-group-btn">
              <button type="button" class="btn btn-default "><i class="glyphicon glyphicon-plus"></i></button>
              <button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="AdvertiserDropdown"><i class="glyphicon glyphicon-cog"></i></button>
                <ul class="dropdown-menu dropdown-menu-right">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
</div>    
  <span class="input-group-addon validation-icon glyphicon glyphicon-asterisk"></span>          </div>
      <!-- /.input-group -->