positioning of bootstrap dropdown button with labels

Question

Using bootstrap 3 I am trying to produce a row of labeled dropdown menus with a final query button. However the buttons are floating to the left of the labels due to the btn-toolbar CSS. Changing the btn-toolbar to float right produces a reversed order of query button and choices with the labels in the right position.

<div class="btn-toolbar row">

  <div class="btn-group">
    <label class="btn-label">Topic:</label>
    <button id="choose_topic_title" type="button" class="btn btn-default">Select</button>
    <button id="choose_topic" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul id="choose_topic_menu" class="dropdown-menu">
      <li><a href="#">all</a></li>
      <li><a href="#">weather</a></li>
      <li><a href="#">sports</a></li>
      <li><a href="#">business</a></li>
      <li><a href="#">news</a></li>
      <li><a href="#">arts</a></li>
      <li><a href="#">science</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <label for="choose_lang_title" class="control-label">Language:</label>
    <button id="choose_lang_title" type="button" class="btn btn-default">Select</button>
    <button id="choose_lang" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul id="choose_lang_menu" class="dropdown-menu">
      <li><a href="#">en-us</a></li>
      <li><a href="#">es-us</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <a href="#">
      <button id="query_data" type="button" class="btn btn-primary">Query</button>
    </a>
  </div>
</div>

Does bootstrap have a simple way to position a horizontal row of labeled dropdown menus?

Here is a jsfiddle demonstrating the issue: https://jsfiddle.net/cgalles/nqmqka2e/4/

Answer 1

You can change float of your labels (or you can add pull-left class to labels).

.btn-toolbar .btn-label {
  float: left;
}

JSFIDDLE