Moshe Katz Moshe Katz - 2 years ago 199
HTML Question

Full Width Split Dropdown Button in Twitter Bootstrap

I have a place on my site which is using a bunch of

elements styled with
(example from the Twitter Bootstrap Docs). I now want to switch some of them to split buttons (example), but I can't seem to get the split buttons and the normal buttons to be the same length.

I have experimented with all kinds of things, but I can't seem to find a way to do this. Has anyone ever managed to do it? Keep in mind that I do not want to hard-code the width of any elements if I don't have to. (Note that this includes not using hard-coded percentages either.) If it is absolutely necessary, I am OK with defining a width for the toggle part of the button (because I know there will only be a single arrow character in there) but want to specify as few "magic numbers" as possible in order to keep the code maintainable in the future.

Answer Source

Wrap the dropdown-lead in a container:

<button class="btn btn-block btn-primary" type="button">Block level button</button>
<div class="btn-group btn-block fillsplit">
  <div class="leadcontainer">
  <a class="btn btn-primary dropdown-lead" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>

And then you can position it relative to the container above:

    width: 100%;
.leadcontainer {
    left: 0;
    position: absolute;
    right: 30px;
    width: 30px;
    float: right;
    box-sizing: border-box;
.fillsplit {
    position: relative;

Fiddle here:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download