Word-wrap not working in 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

score 17 · Accepted Answer · answered Jan 24 '14 at 11:57

17

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

answered Jan 24 '14 at 11:57

Mr. Alien

153,751
34
298
278

4

Mr. Alien Magic again – Dinesh Kanivu Jan 24 '14 at 12:02
1

Thank you so much, it worked, i will mark it as answer once the site allow me. – Shahzeb Khan Jan 24 '14 at 12:03
+1. By the way, why does Bootstrap "like" using `white-space: nowrap;` property? I think this goes against the principle of responsiveness. I would like to understand the logic: for example, when I want to create responsive tables, the Bootstrap documentation suggests wrapping the `` with an element which is supplied with the `table-responsive` class (http://getbootstrap.com/css/#tables-responsive). In this case, `nowrap` property is used, which results in not being able to see the cell's whole text when viewing the page on a phone (only if I can scroll).
– Sk8erPeter Jun 11 '14 at 14:32
With `white-space: normal;`, text will wrap when necessary, which makes it more "responsive" in my opinion. Examples: 1st case: http://www.bootply.com/render/BtzTkf1jcn (and the result (on a Samsung Galaxy S Advance, Android's built-in browser): http://i.imgur.com/CXhvaCQ.png), 2nd case: http://www.bootply.com/render/b55Sy7gfTz (and the result: http://i.imgur.com/VCbUl5z.png). How is the latter (using `nowrap`) "responsive" when the text will never wrap to the next line? – Sk8erPeter Jun 11 '14 at 14:37

score 2 · Answer 2 · answered Jan 24 '14 at 11:59

2

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

answered Jan 24 '14 at 11:59

Stephan Weinhold

1,623
1
28
37

score 0 · Answer 3 · answered Jan 24 '14 at 12:00

0

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

answered Jan 24 '14 at 12:00

vivek

309
1
2
8

Word-wrap not working in bootstrap 3

3 Answers3

Linked