Bootstrap3 two dropdowns on the same line

Question

I'm trying to make two bootstrap3 dropdown element working on the same line:

I've tried this:

 <div class="btn-group btn-block">
    <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu btn-block">
        <li><a href="#">Reason 1</a></li>
        <li><a href="#">Reason 2</a></li>
        <li><a href="#">Reason 3</a></li>
    </ul>


    <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu btn-block">
        <li><a href="#">Reason 5</a></li>
        <li><a href="#">Reason 6</a></li>
        <li><a href="#">Reason 7</a></li>
    </ul>   
</div>

Unfortunately it seems that the two dropdowns share the same ul list (only the second one). How can I bind the first dropdown to its ul list and the second one to its own ul list too?

Answer 1

You need to separate your dropdowns in two btn-group:

<div class="btn-group btn-group-inline">
  <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu btn-block">
    <li><a href="#">Reason 1</a></li>
    <li><a href="#">Reason 2</a></li>
    <li><a href="#">Reason 3</a></li>
  </ul>
</div>

<div class="btn-group btn-group-inline">
  <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu btn-block">
    <li><a href="#">Reason 5</a></li>
    <li><a href="#">Reason 6</a></li>
    <li><a href="#">Reason 7</a></li>
  </ul>
</div>

jsfiddle-link

Answer 2

You need them in 2 different divs like:

<ul class="list-inline">
  <li>
    <div class="btn-group btn-block">
      <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu btn-block">
        <li><a href="#">Reason 1</a></li>
        <li><a href="#">Reason 2</a></li>
        <li><a href="#">Reason 3</a></li>
      </ul>    
    </div>
  </li>

  <li>
    <div class="btn-group btn-block">
      <button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu btn-block">
        <li><a href="#">Reason 1</a></li>
        <li><a href="#">Reason 2</a></li>
        <li><a href="#">Reason 3</a></li>
      </ul>    
    </div>
  </li>
</ul>