Bootstrap: Two Links in the Same Row in Dropdown
Posted on Tue 15 December 2015 in Frontend
Sometimes you need to place two links side by side in the same row within a Bootstrap dropdown. The solution combines structured HTML and CSS with flexbox.
The Problem¶
By default, Bootstrap renders dropdown links as block elements, occupying the entire row:
<!-- Default behavior: each link on its row -->
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
The Solution¶
Structured HTML¶
<li class="hz">
<a href="#">On the third row</a>
<a href="#">Also on the third row</a>
</li>
Key: Multiple <a> links within the same <li> with a custom class.
CSS with Flexbox¶
.open > ul > li.hz {
display: inline-flex !important;
}
Key: inline-flex overrides Bootstrap's default block display.
Complete Implementation¶
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Menu <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">First option</a></li>
<li><a href="#">Second option</a></li>
<li class="hz">
<a href="#">Option A</a>
<a href="#">Option B</a>
</li>
<li><a href="#">Last option</a></li>
</ul>
</div>
Additional Considerations¶
Spacing between links¶
.hz a {
margin-right: 10px;
}
.hz a:last-child {
margin-right: 0;
}
Responsive¶
@media (max-width: 768px) {
.open > ul > li.hz {
display: block !important;
}
}
When to use it?¶
- Related actions (Edit/Delete)
- Binary options (Yes/No, Enable/Disable)
- Compact navigation in tight spaces
This technique maintains correct HTML semantics while leveraging the flexibility of flexbox for more complex layouts.
Original source: Stack Overflow