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    lt div class  row question  gt           lt div class  dropdown  gt               lt div class  col-md-6  data-toggle  dropdown  gt                  First column                  lt ul class  dropdown-menu  role  menu  aria-labelledby  dLabel  gt                       lt li gt Insert your menus here lt  li gt                       lt li gt Insert your menus here lt  li gt                       lt li gt Insert your menus here lt  li gt                       lt li gt Insert your menus here lt  li gt                       lt li gt Insert your menus here lt  li gt                       lt li gt Insert your menus here lt  li gt                   lt  ul gt               lt  div gt           lt  div gt  lt  -- end of the dropdown -- gt           lt div class  dropdown  gt               lt div class  col-md-6  data-toggle  dropdown  gt                  second column                  lt ul class  dropdown-menu  role  menu  aria-labelledby  dLabel  gt                       lt li gt Insert your menus here lt  li gt                       lt li gt Insert your menus here lt  li gt                       lt li gt Insert your menus here lt  li gt                       lt li gt Insert your menus here lt  li gt                       lt li gt Insert your menus here lt  li gt                       lt li gt Insert your menus here lt  li gt                   lt  ul gt               lt  div gt           lt  div gt       lt  div gt  lt  --end of the row question -- gt    lt script gt          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             lt  script gt

User · Answer

You can for example just add a  col-xs-12  class to the  lt ul gt  which holds the list items    lt div class  col-md-6  data-toggle  dropdown  gt              First column              lt ul class  dropdown-menu col-xs-12  role  menu  aria-labelledby  dLabel  gt                   lt li gt Insert your menus here lt  li gt                   lt li gt Insert your menus here lt  li gt                   lt li gt Insert your menus here lt  li gt                   lt li gt Insert your menus here lt  li gt                   lt li gt Insert your menus here lt  li gt                   lt li gt Insert your menus here lt  li gt               lt  ul gt           lt  div gt    This worked ok on any screen resolution in my site  The class will match the list width to it s containing div I believe

User · Answer

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        lt ul class  dropdown-menu w-100  gt         lt li gt  lt a class  nav-link  href     gt Choice1 lt  a gt  lt  li gt         lt li gt  lt a class  nav-link  href     gt Choice2 lt  a gt  lt  li gt         lt li gt  lt a class  nav-link  href     gt Choice3 lt  a gt  lt  li gt    lt  ul gt    https   www codeply com go pAqaPj59N0

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

If you have BS4 another option could be     dropdown-item      width  max-content  important      dropdown-menu        max-height  max-content      max-width  max-content

User · Answer

Add the following css class   dropdown-menu       width  300px  important      height  400px  important      Of course you can use what matches your need

[jquery] Increase bootstrap dropdown menu width

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4