Bootstrap

The Bootstrap Blog

News and announcements for all things Bootstrap, including new releases and Bootstrap Themes.

25,000

Earlier today Bootstrap passed 25,000 watchers on GitHub. For the last few months it has been the most watched project and continues to grow at an alarming rate. In fact, I recall writing about 8,700 watchers back in October. Jacob and I are still both in awe of how this former internal pet project has grown into one of the most popular front-end frameworks on the Web.

We’ve still got a lot ahead of us for features, refinement, and more, but we wanted to take a moment once again to thank the community for making Bootstrap the success that it is today.

Thank you. Really, thank you.

And a special thanks to the 119 contributors (not including Jacob or myself) who have committed code to Bootstrap. Without you guys, a lot of this wouldn’t be possible.

Here’s to the next 25,000!

<3,

@mdo and @fat

What up, nerds?

Welcome one and all to the new, official Twitter Bootstrap blog. From now on, Jacob and I will be posting info on new releases, documentation changes, great examples of folks using Bootstrap, and more. Stay tuned for our first post on the next two updates for the project.


Coming up in Bootstrap

We’ve been mum on the next few releases for Bootstrap the last couple weeks, and with good reason: both Jacob and I have been super busy at work and we’re uncertain of what features to add next. That said, we know we have some bugs and docs fixes to make and know we can slip in a few small features if time allows. I’ve updated the roadmap to reflect the last two releases and a general outline for the next two.

But, what’s next?

2.0.3

To start, we’ll take a good hard look at the docs and current components to get a strong base and iron out additional bugs we introduced in 2.0.2. This release will not include any new features at all. Key bugs to fix include the static navbar regression and tabbed content alignment, but you can see a more thorough list on the 2.0.3 milestone.

2.1.0

After 2.0.3, we have a small feature and (as required) bugfix release to push out. So far, the only features we’re planning on adding include an official addition of the subnav, Growl-style notifications, and an OOCSS-style media component. The first two are some of oldest feature requests, and honestly are fairly easy to add and document compared to some of the other requests.

We haven’t slated anything else because of other time commitments, but we’re open to hearing your feedback if you have top requests. Feel free to weigh in on Twitter or on GitHub.

Timing

We don’t have specific dates in mind, but we know we want 2.0.3 out by the end of the month to address those key bugs. 2.1 will follow, but not for at least a month or two after 2.0.3.

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.

.label,
.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 {
  &.label:hover,
  &.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).