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/