[jquery] Increase bootstrap dropdown menu width

wondering if anyone has any tips on how to increase the dropdown width?

I have a row containing two columns with a a bit of javascript that slides the dropdown up and down when selected. The problem I am having is that I can't seem to figure how to increase the dropdown width when selected, ideally the dropdown would match the column size. But what is happening is that the dropdown width is only the same size as the text within the dropdown does anyone have a suggestion on how to increase the dropdown width to match the column size?

<div class="row question">
        <div class="dropdown">
            <div class="col-md-6" data-toggle="dropdown">
                First column
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                </ul>
            </div>
        </div><!-- end of the dropdown -->
        <div class="dropdown">
            <div class="col-md-6" data-toggle="dropdown">
                second column
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                    <li>Insert your menus here</li>
                </ul>
            </div>
        </div>
    </div><!--end of the row question -->

<script>
     // ADD SLIDEDOWN ANIMATION TO DROPDOWN //
    $('.dropdown').on('show.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    });

    // ADD SLIDEUP ANIMATION TO DROPDOWN //
    $('.dropdown').on('hide.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
    });
</script>

Update 2018

You should be able to just set it using CSS like this..

.dropdown-menu {
  min-width:???px;
}

This works in both Bootstrap 3 and Bootstrap 4.0.0 (demo).

A no extra CSS option in Bootstrap 4 is using the sizing utils to change the width. For example, here the w-100 (width:100%) class is used for the dropdown menu to fill the width of it's parent....

 <ul class="dropdown-menu w-100">
      <li><a class="nav-link" href="#">Choice1</a></li>
      <li><a class="nav-link" href="#">Choice2</a></li>
      <li><a class="nav-link" href="#">Choice3</a></li>
 </ul>

https://www.codeply.com/go/pAqaPj59N0

If you have BS4 another option could be:

.dropdown-item { 
  width: max-content !important;
}

.dropdown-menu {

    max-height: max-content;
    max-width: max-content;
}

Text will never wrap to the next line. The text continues on the same line until a
tag is encountered.

.dropdown-menu {
    white-space: nowrap;
}

Usually we have the need to control the width of the dropdown menu; specially that's essential when the dropdown menu holds a form, e.g. login form --- then the dropdown menu and its items should be wide enough for ease of inputing username/email and password.

Besides, when the screen is smaller than 768px or when the window (containing the dropdown menu) is zoomed down to smaller than 768px, Bootstrap 3 responsively scales the dropdown menu to the whole width of the screen/window. We need to keep this reponsive action.

Hence, the following css class could do that:

@media (min-width: 768px) {
    .dropdown-menu {
        width: 300px !important;  /* change the number to whatever that you need */
    }
}

(I had used it in my web app.)

You can for example just add a "col-xs-12" class to the <ul> which holds the list items:

<div class="col-md-6" data-toggle="dropdown">
            First column
            <ul class="dropdown-menu col-xs-12" role="menu" aria-labelledby="dLabel">
                <li>Insert your menus here</li>
                <li>Insert your menus here</li>
                <li>Insert your menus here</li>
                <li>Insert your menus here</li>
                <li>Insert your menus here</li>
                <li>Insert your menus here</li>
            </ul>
        </div>

This worked ok on any screen resolution in my site. The class will match the list width to it's containing div I believe:

Usually the desire is to match the menu width to the width of the dropdown parent. This can be achieved easily like so:

.dropdown-menu {
  width:100%;
}