Bootstrap dropdown: how to make text wrap nicely

Is this close to what you are after?
http://www.bootply.com/69776

You will see I've changed the HTML slightly and added a CSS class to limit the width of the dropdown. The HTML is taken directly from the bootstrap site with a couple of extra classes for the button.

HTML

<div class="dropdown">
<a class="btn btn-min dropdown-toggle" data-toggle="dropdown" href="#"> Action
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum 
  non nulla eu dui imperdiet eleifend in vel ligula. Ut tempor gravida 
  leo. Sed in tellus justo. Nam vel nisl nulla. Proin sagittis semper 
  nunc et vehicula. Proin quam lacus, feugiat quis diam in, malesuada 
  posuere odio. Integer pharetra sed ante eget posuere. Nullam a 
  dapibus leo, vitae gravida ligula. Praesent consectetur lorem et 
  pellentesque imperdiet. Suspendisse vitae libero auctor, pharetra 
  nunc eu, laoreet dui. Fusce posuere risus risus, id ultricies lectus 
  aliquet et. Nullam eget orci et mauris lacinia sollicitudin non vel 
  felis. Praesent eleifend risus et libero ultrices facilisis.
</ul>
</div>

CSS

 .dropdown-menu{
 max-width:300px;
 }  

Hope this helps!


Just add white-space: normal; to your .dropdown-menu

Example fiddle


you can add this class to your dropdown items. This will wrap text when necessary.

.dropdown-item {
  white-space: pre-wrap;
}

Adding white-space normal to the anchor tag within .dropdown-menu worked for me, adding it just to .dropdown-menu didn't work.

.navbar .nav li .dropdown-menu li a {white-space: normal;}