Increase bootstrap dropdown menu width

Question

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> 

Answer 1

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

Answer 2

Add the following css class

.dropdown-menu {     width: 300px !important;     height: 400px !important; } 

Of course you can use what matches your need.