Bootstrap Dropdown Button with Block Level?
For single button dropdown @Skelly answer works. For the split button dropdown, I got the answer from Dave Ward's Using btn-block with Bootstrap 3 dropdown button groups.
He uses col-*-*
for split buttons
<div class="col-sm-6">
<button class="btn btn-block btn-lg btn-success">Approve</button>
</div>
<div class="col-sm-6">
<div class="btn-group btn-block">
<button class="col-sm-10 btn btn-lg btn-danger">Deny</button>
<button class="col-sm-2 btn btn-lg btn-danger dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li><a href="#">Reason 1</a></li>
<li><a href="#">Reason 2</a></li>
<li><a href="#">Reason 3</a></li>
</ul>
</div>
</div>
Apply btn-block
to both the btn-group
and btn
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-primary dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Dealer Tools <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Dealer Area</a></li>
<li class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-phone"></span> App Registration</a></li>
</ul>
</div>
Demo: http://bootply.com/101166
When using a drop down, apply btn-block to btn-group first, then you can add col-?-? in the button's class to control the width of the button sections. Handy little trick.
<!-- Split button -->
<div class="btn-group btn-block">
<button type="button" class="btn col-lg-10 btn-lg btn-danger">Action</button>
<button type="button" class="btn col-lg-2 btn-lg btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu col-lg-12" 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 class="btn-group btn-block">
<button type="button" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">
<span class="col-lg-10">
Button dropdown
</span>
<span class="col-lg-2">
<span class="caret"></span>
</span>
</button>
<ul class="dropdown-menu btn-block" 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>