CODEWITHSUNDEEP
twitter-bootstrap
blueFast
blueFast

Reputation: 44331

No spacing between bootstrap labels

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

enter image description here

Instead, I am getting this:

enter image description here

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.

Upvotes: 22

Views: 17345

Answers (4)

macm
macm

Reputation: 2019

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.

Upvotes: 4

George Filippakos
George Filippakos

Reputation: 16569

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.

Upvotes: 15

Anderson Freitas
Anderson Freitas

Reputation: 458

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

Upvotes: 20

AyB
AyB

Reputation: 11665

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.

Upvotes: 2

Related Questions