Check out my Fiddle.
Beneath Dropdown1 lies a single-column list of actions.
I'm looking to expand this list across multiple columns, like 5 or the width of the page.
I'm hoping there's a Bootstrap CSS class I can use for this, but I might need to tweak some CSS.
Any suggestions on how I can accomplish this?
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false>Dropdown1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
...
</ul>
</li>
EDIT1
You can also try using this method:
.dropdown-menu {
height: 300%;
width: 400%;
}
However, this only adjusts the dropdown area, not the layout of the actions within it.
EDIT2
Alternatively, consider exploring another approach with its own set of challenges:
ul .dropdown-menu li{
float: left;
width: 50%; // Use this to determine the number of columns, e.g., 33.3% for 3 columns
}