Bootstrap 3 – Keep Dropdown Menu Small When Linked To Small Button

Bootstrap 3 – Keep Dropdown Menu Small When Linked To Small Button

0 2960

This morning I was creating a extra small bootstrap button linked with a drop down menu. I was really tight on space and noticed that the font size on the drop down menu did not correspond with the class that was put on the button to change it’s size. Here is a snippet of CSS that can be included to accomplish this.

.btn.btn-xs + ul.dropdown-menu > li > a {
    font-size: 12px;
}

The CSS Selector Explained

The selector is is looking for a button that contains the classes “btn” and “btn-xs”. The “+” looks for the first sibling element(on the same hierarchical level) to be a <ul> tag containing the css class “dropdown-menu”. It then must have a <li> directly under the <ul> followed by a <a> tag directly under the <li>. Phew, got all that…

I used firebug to look at the font-size that was being applied to the “btn-xs” by bootstrap and matched it.

Here is a fiddle I whipped up if you would like to see it in action. This same technique could be applied for the other bootstrap buttons sizes.

NO COMMENTS

Leave a Reply