Gideon Gideon - 6 months ago 33
Javascript Question

Bootstrap 3's Split button caret height is smaller than the main button

I'm using Bootstrap 3's button with attached drop-up menu using this code:

<div class="btn-group dropup">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
<ul class="dropdown-menu">
<li><a href="#">Remittance Summary</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Close Advice</a></li>

But the caret is rendered smaller that the left button.

Remittance Summary.png

However, including text with the caret apparently removes the problem:

Remittance Summary.fixed.png

I'm wondering why does the caret not the same height with the left button? There is no
loaded that overrides bootstrap's. And this button group is found at a modal-footer, if that helps.

I found the problem: The brower applies
to the
of the caret button instead of applying the default
. I wonder why?


Checking it's css property, its height is set to auto. It's grey-out thought so I cannot trace where it was set.


So I forced a property to it via:

button.btn.dropdown-toggle {
    height: 34px !important;