bootstrap dropdown use flexbox and space-between for content to fill space

user2954587 Source

I'd like to have two side menus in a dropdown in the navbar. In order to accomplish that I'd like to use flexbox. However the words are wrapping and i would like them not to and instead grow to fit the width of the content.

Tip: You'll need to expand the fiddle's rendering width to avoid the bootstrap collapse. fiddle

<nav class="navbar navbar-default">
  <div class="container-fluid">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <div class="flex-container">
                <li><a href="#">Left Side</a></li>
                <li><a href="#">Longer content on the left side</a></li>
                <li><a href="#">Log In</a></li>
                <li><a href="#">Sign Up</a></li>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->

.flex-container {
  display: flex;
  justify-content: space-between;


answered 6 months ago Gibin Ealias #1

You need to override the bootstrap's default style on .dropdown-menu with something like,

.dropdown-menu {
  min-width: 300px;

Hope this helps.

answered 6 months ago user2954587 #2

I found the answer here. I was looking to avoid setting a fixed min-width

.dropdown-menu > li > a {
    white-space: nowrap;

comments powered by Disqus