Label text not wrapping in a Bootstrap grid setup

Question

I am trying to get labels to not wrap in Bootstrap3 but can't seem to get it to work.

I tried placing 'word-wrap: break-word' even on the label but that doesn't seem to break the label's sentence either.

I did see in the documentation to 'Wrap labels and controls in .form-group for optimum spacing.' but I cannot use 'form-group' i think if I want to use bootstrap divs to control grid/form layout of the labels/answers separately (the labels/inputs are more mobile friendy and expand to 100% of the screener when on xs screens, but on sm+ screen the labels show up left of the input to save screen space).

Here is an example... Expand the jsfiddle's right side frame very big and then you see the form labels get placed on the left with right text-alignment and the issue occuring then.

http://jsfiddle.net/armyofda12mnkeys/nud64aq7/

Pic below of the 3rd label which doesn't wrap: enter image description here

Here is the basic code I use for that label/input setup:

<div class="col-xs-12 col-sm-4  label">
    <label for="firstname">House Number and Street and longer label and longer label and longer label and longer label and longer label </label>
</div>
<div class="col-xs-12 col-sm-8 answer">
    <input type="text" class="form-control" placeholder="Enter your house # here" />
</div>

crazymatt crazymatt · Accepted Answer · 2015-05-06T21:15:57

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!

Label text not wrapping in a Bootstrap grid setup

4 Answers