I'm struggling to get a dropdown menu to work properly within a horizontal description. The dropdown menu just won't toggle when clicked.
<div class="container-fluid">
<div class="row vertical-align">
<dl class="dl-horizontal">
<dt>
<div class="dropdown">
<button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Sidebar <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" role="menuitem">test1</a></li>
<li><a href="#" role="menuitem">test2</a></li>
</ul>
</div>
</dt>
<dd>The sidebar consists of various dynamic sections that update automatically based on the selected objects on the map. These sections include: the search tool for moving the map to a specific geographic object, the graph area, the layer manager, the information tool, the observation tool, and the map legend.</dd>
</dl>
</div>
</div>
Why won't the dropdown menu open? Is there a solution to make it functional?