No spacing between bootstrap labels

No spacing between bootstrap labels

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.


Solution 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.

Bootstrap demo

Solution 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.

Related:  jQuery - “fadeIn is not a function”

Solution 3:

I did this.

.label {
    margin-left: 5px; 

You can edit your bootstrap.css or edit less/labels.less and compile.

The space problem could be something in javascript code. I am testing without javascript from bootstrap.

Solution 4:

The spacing between the labels (using <span>) is not defined in bootstrap, in fact, it’s the default HTML CSS in-built into the browser.

I’m not sure what CSS could cause spacing like that between the <span> elements (leaving out padding and margin) but I strongly suspect the reason it’s not applying in your case is because you have a float:left; somewhere added to your span elements.

Your problem replicated here.

Hence the solution is to use the inspector tool on the <span> element and find the line and erase where the float:left; is being added.