Question

I have the following code – 3 Button Dropdown Menus are next to each other, each with their own unique ID. However, pressing the caret on the first 2 do nothing, while pressing the 3rd caret makes the drop-down menu on the first appear. Any reason why? Am I missing something that adds uniqueness to the Button Group? A bug in Bootstrap?

<div class="btn-group" id="all-sectors">
    <button class="btn btn-larger btn-primary title">All Sectors</button>
    <button class="btn btn-larger btn-primary dropdown-toggle" data-toggle="dropdown">
       <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#" class="camera-filter" data-filter-type="all">All Cameras</a></li>
        <li><a href="#" class="camera-filter" data-filter-type="camera-Joe0">camera-Joe0</a></li>
            <li><a href="#" class="camera-filter" data-filter-type="North-Joe0">North-Joe0</a></li>
        <li><a href="#" class="camera-filter" data-filter-type="East-Joe0">East-Joe0</a></li>
    </ul>
</div>

<div class="btn-group" id="all-grids">
    <button class="btn btn-larger btn-primary title">All Grids</button>
    <button class="btn btn-larger btn-primary dropdown-toggle" data-toggle="dropdown">
       <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#" class="camera-filter" data-filter-type="all">All Cameras</a></li>
        <li><a href="#" class="camera-filter" data-filter-type="camera-Joe0">camera-Joe0</a></li>
    </ul>
</div>

<div class="btn-group" id="all-cameras">
    <button class="btn btn-larger btn-primary title">All Cameras</button>
    <button class="btn btn-larger btn-primary dropdown-toggle" data-toggle="dropdown">
       <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#" class="camera-filter" data-filter-type="all">All Cameras</a></li>
        <li><a href="#" class="camera-filter" data-filter-type="camera-Joe0">camera-Joe0</a></li>
    </ul>
</div>

Answer 1

The problem was in my CSS. I added a

float:left;

to each .btn-group which stopped the first two from working properly. I should have wrapped them in a

.btn-toolbar 

wrapper instead.