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-sele

Answer 1

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