How to make bootstrap dropdown menu width to be flexible?

css twitter-bootstrap twitter-bootstrap-3

15,997

I have implement snippet that you can change as per your requirement.Main part is CSS change :

.dropdown-menu {
  max-width: 180px;
}
.dropdown-menu li a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">  
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#" title="HTML">HTML</a></li>
      <li><a href="#" title="CSS">CSS</a></li>
      <li><a href="#" title="HTML CSS JavaScript bootstrap">HTML CSS JavaScript bootstrap</a></li>     
    </ul>
  </div>
</div>

</body>
</html>

15,997

Author by

Jand

Updated on June 04, 2022

Comments

Jand almost 2 years

In Bootstrap 3, I want to put several links in a drop-down menu:

    <li class="dropdown">
            <a id="alert" data-toggle="dropdown" class="dropdown-toggle"  href="#" title="Notification">Notifications </a>

            <ul id="noti" class="dropdown-menu">
                 {% for t in alerts%}
                   <li> 
                     <a href="/article/{{t.slug}}">{{t.title}}</a>
                   </li>
                 {% endfor %}
            </ul>     
    </li>

The problem is that each link has a different width, so I'm wondering how to define css to wrap even the longest links in the menu?

Jand about 8 years

I tried that css. It did not work. Can you elaborate an independent answer?
Jand about 8 years

This is good, but does not display the last link in full, which I want.
Shivani P about 8 years

You can change value of max-width property or assign width:100% of dropdown-menu class in CSS.