No spacing between bootstrap labels

Question

In my application, I am trying to have several conecutive labels, like in this jsbin:

Instead, I am getting this:

As you can see, no spacing is present between the labels. This is probably because of a problem in my CSS, but I am unable to find the culprit.

Where is the spacing between labels defined in bootstrap? Knowing that would allow me to narrow the bug-search in my CSS.

Answer 1

This has nothing to do with your CSS at all. Just add a space or break the line between your ".label" tags.

This happened to me when the framework I use started to compress the HTML in order to save some bytes.

You can see this effect on this jsbin.

Answer 2

You need to remove the space from inside the label.

The following spans have no space between each other:

<span class="label label-primary"> Primary </span> <span class="label label-default"> Default </span> 

The following spans have the correct spacing between them:

<span class="label label-primary">Primary</span> <span class="label label-default">Default</span> 

Notice that the leading/trailing white space must be removed from inside the span element for them to work correctly.