自动换行不在bootstrap 3中工作

Question

I am trying to create a button having some text over it. But the text is not wrapping on the button. Here is what i have done.

<div class="form-group">
  <div class="col-md-6 col-sm-6 col-xs-6">
    <input type="radio" id="1" class="hidden">
    <label for="1" class="btn btn-info btn-preference  pull-right">Stability</label> 
  </div>
  <div class="col-md-6 col-sm-6 col-xs-6">
    <input type="radio" id="1" class="hidden">
    <label for="1" class="btn btn-primary btn-preference text-center">
      <span class="break-wo">Freedom and Risk</span>                                                        
    </label> 
  </div>
</div>

Here is the Link for bootfly

Answer 1

It's not the wrap, it's white-space: nowrap; which is preventing the text to wrap when used .btn which contains white-space: nowrap; so use white-space: normal;

label[for="1"].btn {
    white-space: normal;
}

Demo

---

Note: Your ID value is invalid, you cannot start an id with a number

Answer 2

Have you tried adding white-space: normal; to your span class="break-wo" ? This should help.

Answer 3

Try this way...

<div class="radio">
 <label class="btn btn-info">
  <input type="radio" id="1" name="optionsRadios" class="hidden" value="option1" checked>
  Option one
 </label>
</div>

Adding the tag inside the label