The Bootstrap Blog

Announcements, discussions, and more for Bootstrap and the Official Bootstrap Themes.

Combining badges.less and labels.less in 2.0.3

For one reason or another, in 2.0.2 we made badges have separate LESS files. The CSS is 95% the same, but we knew that some folks might need one or the other, or even both. With 2.0.3, we’ll be simplifying some of those styles into a single .less file and scoping the :hover state to anchors only.

Moving forward, we’ll have the following as a shared set of base styles. As you can see, when combined, there isn’t much extra weight at all for those who want just badges or labels.


.badge {
  font-size: @baseFontSize * .846;
  font-weight: bold;
  line-height: 13px; // ensure proper line-height if floated
  color: @white;
  vertical-align: middle;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  background-color: @grayLight;

One file, multiple components. We’ve done it before with our multiple types of navigation, so it’s nothing folks familiar with Bootstrap haven’t seen before.

On a related note, we’ve changed how we handle hover states for badges and labels. Instead of having a default hover state on an inherently static element, one made with say a span, we relegate the hover state (a cursor and background change) to anchors only.

a {

  &.badge:hover {
    color: @white;
    text-decoration: none;
    cursor: pointer;

For the alternate colors on badges and labels, we’ve also relegated those styles to anchors only (those with an href attribute).