When using bootstrap 3, I am attempting to create a row of labeled dropdown menus with a final query button. However, the buttons are currently aligned to the left of the labels due to the btn-toolbar CSS. Changing the btn-toolbar to float right results in a reversed order of the query button and choices, with the labels in the correct position on the right.
https://i.sstatic.net/VUKEo.png
<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>
Is there a straightforward way in Bootstrap to align a horizontal row of labeled dropdown menus?
To see an example illustrating the issue, check out this jsfiddle: https://jsfiddle.net/cgalles/nqmqka2e/4/