positioning of bootstrap dropdown button with labels - css

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>all</li>
<li>weather</li>
<li>sports</li>
<li>business</li>
<li>news</li>
<li>arts</li>
<li>science</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>en-us</li>
<li>es-us</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