CODEWITHSUNDEEP
csstwitter-bootstrap
Marco Jr
Marco Jr

Reputation: 6806

how to make bootstrap dropdown to fill the entire col width

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>

Upvotes: 5

Views: 6475

Answers (1)

Marcelo
Marcelo

Reputation: 4435

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

Upvotes: 5

Related Questions