Label text not wrapping in a Bootstrap grid setup

Are you trying to make the text wrap? If so, add

    white-space:normal; 

to the label class.

http://jsfiddle.net/kswdusL6/


If you look through the DOM elements in your Fiddle you will see this code for the label:

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

Just remove the property or overwrite the white-space: nowrap; or set the property to normal

Update 1.0: Just to clarify this CSS property only exists in Bootstrap v3. In v4.x the white-space property has been removed from label elements.

Update 2.0: People have been asking about BS v4.1 and looking through their code the label wraps like normal text and doesn't not contain a white-space property. However I did notice in the input group section that some of the classes being used do contain white-space: nowrap (i.e. input-group-text class). The fix would be the same, overwrite the property in a separate file or edit that specific class to use white-space: normal. If its happening in a different section that I dont see let me know in the comments and I'd be happy to take a look!


add this to the label

label {
    white-space: normal;
}

example working: http://jsfiddle.net/nud64aq7/4/