I recently found myself wanting to combine Bootstrap 3’s full-width btn-block button with its split button dropdown component in the same button group (as seen in the screenshot above). As it turned out, it wasn’t as straightforward as you might expect. So, I want to briefly share the solution I found to make that work.

My first try (fail)

Originally, I hoped that I could use the standard Bootstrap 3 dropdown component markup, and simply add the btn-block class to the main button, like this:

Makes enough sense, right? Well, Bootstrap had other ideas:

Bootstrap btn-block dropdown fail #1

That result is kind of perplexing, but inspecting the group in browser dev tools makes it somewhat clearer:


Since the button group class sets display: inline-block on the button group container, it only expands wide enough to fill the minimum area necessary to display its contents. Even though the deny button’s btn-block class does make it expand to 100% of its parent’s width, that parent button group is constrained to be so narrow that it’s practically pointless.

Btn-block all the things?

Since the btn-group container’s display: inline; limits its contents’ width too much, I figured that maybe I could just btn-block the container too:

This comes quite a bit closer, but still has the same wrapping issue that the previous attempt did:


Since btn-block sets both display: block and width: 100%, the deny button expands to fill 100% of the space inside the btn-group container and forces the caret button onto a separate line.

Making it work

My first thought was to add custom CSS on both buttons to override btn-block‘s 100% width. That way, I could make the main button’s width about 90%, set the caret to 10%, and everything would fit nicely.

As I was thinking about setting those percentage widths, I realized that a more straightforward solution was already staring me right in the face just a few lines of code away: Bootstrap’s grid system.


Since one of the functions of the Bootstrap grid classes is to set percentage widths, they nicely override btn-block‘s 100% width and provide a very easy way to make both buttons coexist beside each other. For example, using col-sm-10 for the main button and col-sm-2 for the caret button:

That markup produces this result between 768px and 992px:


Great! That’s almost exactly what I had in mind.

If I were tweaking the width manually, I might not have made the caret button quite so wide, but these proportions are just fine in many situations (including the one that spurred me to figure this out).

Responsive improvements

That’s great at Bootstrap’s “small” size, but the proportions don’t work quite as well at its 992px “medium” width and beyond. As Bootstrap’s container expands, col-sm-2‘s 16.6% width starts to be a bit too wide to look quite right:


One nice thing about using Bootstrap’s grid classes to size the buttons is that it’s easy to redistribute the proportions of the buttons above or below any of Bootstrap’s responsive breakpoints (768px, 992px, and 1200px).

For example, adding col-md-11 to the deny button and col-md-1 to the caret makes the proportions look much better as the window gets wider than 992px:

Now, resizing to 992px or greater looks great:


You can take this as far as you want and customize widths at every breakpoint.

In fact, in the scenario that prompted this post, it ended up making more sense to hide the caret button entirely at mobile widths. Even that was easy to accomplish by adding the hidden-xs class to the caret button.