CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Benjamin J. B.
Benjamin J. B.

Reputation: 1181

Bootstrap 3.0 labels don't go inline

I have some labels in a well. I don't know how to make them go to next line.

Here is the unexpected result:

enter image description here

Here is my code:

    <div class="well">
      <a href="#"><span class="label label-default">Tag name 1</span></a>
      <a href="#"><span class="label label-primary">Tag name 2</span></a>
      <a href="#"><span class="label label-warning">Tag name 3</span></a>
      <a href="#"><span class="label label-danger">Tag name 4</span></a>
      <a href="#"><span class="label label-info">Tag name 5</span></a>
      <a href="#"><span class="label label-success">Tag name 6</span></a>
    </div>

update

Ok, thanks @markthethomas, your respond gave me a tip!

The issue is due to my framework (Rails here) which minimify my html code, removing the supposed unnecessary spaces between each a tag.

Here is a not working demo, without space: http://www.bootply.com/lJJB13ES6V and here is a working demo, the same code but with spaces: http://www.bootply.com/fAOIVSKwaU

Does someone know the reason of this behavior?

Upvotes: 0

Views: 2228

Answers (5)

Bass Jobsen
Bass Jobsen

Reputation: 49044

The problem is exclusively related to the Bootstrap's .label class as already mentioned by @Christina, but in my opinion @Christina is wrong about the fact that the white-space: nowrap; will cause the issue described.

The .label class set the display property to inline. Setting this property to inline-block will solve your problem correct:

.label {
display: inline-block;
}

Demo: http://www.bootply.com/QqMZzNkQxI

And indeed the issue only happens when there is no white space between the anchor (a) tags.

Something similar can be found at: http://getbootstrap.com/components/#labels:

Rendering problems can arise when you have dozens of inline labels within a narrow container...

Upvotes: 3

Pavithra Ashwath
Pavithra Ashwath

Reputation: 163

Based on the answer given by Markthethomas, please find the changes for the class in the div

 <div class="row">
   <div class="col-xs-4 col-sm-12">
      <div class="well"> 
        <a href="#"><span class="label label-default">Tag name 1</span></a>
        <a href="#"><span class="label label-primary">Tag name 2</span></a>
        <a href="#"><span class="label label-warning">Tag name 3</span></a>
        <a href="#"><span class="label label-danger">Tag name 4</span></a>
        <a href="#"><span class="label label-info">Tag name 5</span></a>
        <a href="#"><span class="label label-success">Tag name 6</span></a>
      </div>
   </div>
 </div>

Try this and let me know if this solves your issue.

Upvotes: -1

Christina
Christina

Reputation: 34652

.label has the style: white-space: nowrap;. If your white space is removed, then it will not wrap as you have seen. To add wrap back in but prevent the inside from wrapping:

.well .label:after {content:' ';display:inline;white-space:normal}
.well .label {margin-right:2px;}

DEMO: https://jsbin.com/hafeda/1/edit?css,output

Upvotes: 1

markthethomas
markthethomas

Reputation: 4431

You should use BS's grid-sizing aspects to control width and overflow of various elements. For example:

<div class="row">
  <div class="col-sm-4">
    <div class="well">
          <a href="#"><span class="label label-default">Tag name 1</span></a>
          <a href="#"><span class="label label-primary">Tag name 2</span></a>
          <a href="#"><span class="label label-warning">Tag name 3</span></a>
          <a href="#"><span class="label label-danger">Tag name 4</span></a>
          <a href="#"><span class="label label-info">Tag name 5</span></a>
          <a href="#"><span class="label label-success">Tag name 6</span></a>
        </div>      
  </div>
</div>

will render:

enter image description here

Here's a link to a jsfiddle example. http://jsfiddle.net/3q3j0uj4/1/

Does that help?

Upvotes: 0

Nolan
Nolan

Reputation: 916

Need to add float: left or bootstrap pull-left (I think that is name) attribute

Attribute option (pull-left):

<a href="#"><span class="label label-default pull-left">Tag name 1</span></a>

OR CSS option

div.well {
  width: 300px, // or whatever width;
 // add rest of well CSS 
} 


a {
  float: left;
  // rest of your a CSS
}

Upvotes: 0

Related Questions