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;}