Setting the width of a dropdown list in Bootstrap 3.0

Question

How can I set the width of a dropdown triggering button in bootstrap 3.0 to be equal to the width of the dropdown list? Similar to what is achieved when using bootstrap-select (http://silviomoreto.github.io/bootstrap-select/). I have tried to wrap the whole list in a div with a col-* class, but that doesn't seem to work:

<div class="row">
<div class="col-xs-4 col-md-4">
    <div class="dropdown">
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Button</button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Action</a></li>
          </ul>
    </div>
</div>

Thus, I would like: button width = dropdown menu list = col-* width.

score 39 · Accepted Answer · answered Sep 03 '13 at 12:16

39

I found the solution by setting the dropdown-menu and button width=100%.

.dropdown-menu {
  width: 100%; 
}

.btn{
 width: 100%;
}

Now both the button and dropdown list have the same width, controlled by the column width.

answered Sep 03 '13 at 12:16

graphmeter

1,125
1
9
24

score 30 · Answer 2 · answered Sep 03 '13 at 11:45

30

If I understand correctly you want to style the menu width according to the larger option you have to override the min-width property of the .dropdown-menu list like:

.dropdown-menu {
    min-width: 0px !important;
}

Demo: http://jsfiddle.net/faxyz/4/

answered Sep 03 '13 at 11:45

Irvin Dominin

30,819
9
77
111

I would like the button width = dropdown list width = col-* width, sorry for being unclear in the question. – graphmeter Sep 03 '13 at 11:47
There is a difference between your demo and the code above... not sure if makes a difference. – Mark Feb 03 '17 at 20:14
@graphmeter CSS classess like `col-*-*` are for a **grid layout** and should be used after a `row` or `form-group` according to bootlint: http://www.bootlint.com – Roland Nov 17 '17 at 10:02

score 9 · Answer 3 · edited Apr 25 '16 at 18:23

9

You can set the width of .dropdown-toggle. I recommend to use text-overflow ellipsis when the dropdown becomes too small. It's not necessary to style .dropdown-menu. You can set the width of the dropdown to any other value if you want to use it in .input-group or not in the grid.

.dropdown-toggle {   
    overflow: hidden;
    padding-right: 24px /* Optional for caret */;
    text-align: left;
    text-overflow: ellipsis;    
    width: 100%;
}

/* Optional for caret */
.dropdown-toggle .caret {
    position: absolute;
    right: 12px;
    top: calc(50% - 2px);
}

edited Apr 25 '16 at 18:23

Ram

3,092
10
40
56

answered Dec 17 '14 at 11:19

Ben Besuijen

624
9
23

This technique saved my bacon Ben, thanks! I also added in a `-moz-box-sizing: border-box` into the first I had in the `.dropdown-toggle` for firefox – ericpeters Mar 29 '15 at 18:05

score 0 · Answer 4 · answered May 04 '16 at 06:51

I came here looking for a solution to a similar problem, although in my case the dropdown wasn't within a col div. I wanted the dropdown button to match the width of the dropdown list, dependant on the content width of whichever was wider, similar to a select dropdown. If anyone is looking for a similar solution here it is:

.dropdown-container {
  float:right;
  height:60px;
}
.position-dropdown-controller {
  position: absolute;
  right:0;
}

.dropdown-toggle,
.dropdown-menu {
  width: 100%;
  min-width: 0;
}

.dropdown-toggle {
  text-align: right;
}

.dropdown-menu {
  height: 0;
  text-align: center;
  display: block !important;
  visibility: hidden;
  position: relative;
  float: none;
}

.open .dropdown-menu {
  display: block !important;
  visibility: visible;
  height: auto;
}

<div class="dropdown-container">
  <div class="position-dropdown-controller">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        ...
      </ul>
    </div>
  </div>
</div>

In this example I wanted the dropdown floated to the right, but it can just as easily be tweaked to work however you like.

Setting the width of a dropdown list in Bootstrap 3.0

4 Answers4

Linked