How can I make Bootstrap Badge buttons the same width?

Question

How can I force these these Bootstrap badge buttons to have the same width?

The width:100px doesn't have any effect:

http://jsfiddle.net/gbwgv71e/1/

<div style="width:100px" title="new flashcards" class="label label-danger label-as-badge" >0</div> 

<div style="width:100px" title="flashcards you have taken before" class="label label-warning label-as-badge">11</div> 

<div style="width:100px" title="flashcards you have to wait on before you take again" class="label label-default label-as-badge">222</div> 

<div style="width:100px" title="flashcards you've learned" class="label label-success label-as-badge">3333</div>

Answer 1

By default Bootstrap sets .label elements to display inline instead of as a block-level element. Inline elements can't have fixed dimensions as they're fluid. Block-level elements can, but don't sit nicely in a line of text (as you'd expect a label to).

The happy medium is to display labels as an inline block, like so:

<div style="display:inline-block; width:100px"
     class="label label-danger label-as-badge">0</div>

There are known issues with IE6 and IE7 for this technique but its becoming decreasingly relevant to users out there.

Answer 2

You can use the following:

<span class="badge badge-primary w-100">XYZ</span>