title: Bootstrap (TB3) does not wrap button text in bootstrap (TB3) cols
body: <p>I am using bootstrap (Twitter-Bootstrap 3) in a quiz style application and I use bootstrap buttons for the answers of the quiz. My problem is that sometimes the answers are quite long, and instead of wrapping the text to the width of the col that the buttons are placed in, the text just keeps going in one line and goes over the col and the width. Is there an easy way to fix this (Note that I canot define set widths as the length of the answers change)? Showing the code is a bit difficult, as it uses javascript to populate the answer buttons, but I will show a screen shot and the resulted populated HTML (after the javascript has populated the question and answers):</p>
  
  <p><img src="https://i.stack.imgur.com/SM0eK.jpg" alt="Screenshot of problem with buttons not wrapping text"></p>
  
  <p>Here is the resulting HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
   &lt;div style="float: none; margin: 0 auto;" class="col-sm-7"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;Quiz 4 - This is the quiz 4 description&lt;/div&gt;
          &lt;div class="panel-body" id="question" style="display: block;"&gt;&lt;font color="#AAAAAA"&gt;&lt;strong&gt;Code: &lt;/strong&gt;80559&lt;/font&gt;&lt;br&gt;&lt;br&gt;&lt;font color="#888888"&gt;&lt;strong&gt;Instruction: &lt;/strong&gt;Based on the provided correct answer, select the answer choice that correctly gives the required evidence from the text.  Once the timer runs down you will be forced to move onto the next question.&lt;/font&gt;&lt;br&gt;&lt;br&gt;&lt;div class="alert alert-info"&gt;&lt;strong&gt;Question: &lt;/strong&gt;express a negative sentiment in humorous terms&lt;/div&gt;&lt;/div&gt;
          &lt;div class="panel-footer clearfix"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-1" id="submit"&gt;&lt;/div&gt;
                  &lt;div class="col-sm-11" id="answers" style="display: block;"&gt;&lt;button onclick="submitAnswer(22)" class="btn btn-default btn-sm"&gt;negative sentiment: You couldn't pay me to watch that....that's how I feel / humorous terms: beach reading without the beach, airport reading without the airport...&lt;/button&gt;&lt;br&gt;&lt;br&gt;&lt;button onclick="submitAnswer(23)" class="btn btn-default btn-sm"&gt;negative sentiment: they are just the wrong amount of time / humorous terms: they don't have the compressed energy of a short story&lt;/button&gt;&lt;br&gt;&lt;br&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would think that bootstrap should be wrapping the button text within the div automatically, but it doesn't. I have been looking for solutions but I haven't been able to find anything that covers this problem particularly. Any help would be appreciated. I don't want to use <code>&lt;a href='#" ...&gt;</code> because it is important that the page not reload or be redirected when the button is pressed. Only the onclick function submitAnwers() should be called with no redirect.</p>