how to make bootstrap dropdown to fill the entire col width
css, twitter-bootstrap
Solution
You can set the width of the `btn-group` and its `btn` elements as well as the `dropdown-menu` to fit the width of the column you place it on.
CSS
#searchAndLogin .btn-group {width:100%;}
#searchAndLogin .btn-group .btn {width:90%;}
#searchAndLogin .btn-group .btn.dropdown-toggle {width:10%;}
#searchAndLogin .btn-group .dropdown-menu {width:100%;}
Live example here: http://www.bootply.com/WPhb5tLZmh
Problem
By default, dropdown on bootstrap are dynamic based on the length of the text of the selected item. This will break the harmony of my layout and I can't find a solution. Basically I want a row containing a search input and on the right side a dropbox. Something very simple...How to make this possible ? ``` <div class="container-fluid"> <div class="row" id="searchAndLogin"> <div class="col-md-9"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> <div class="col-md-3"> <div class="btn-group"> <button type="button" class="btn btn-default">Action</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> ```