title: css/bootstrap - how do i keep text from overflowing button?
body: <p>I have a button group where I would like to keep the text inside the element. I don't write CSS much and would love to solve it using twitter bootstrap</p>
  
  <p>My problem: 
  <img src="https://i.stack.imgur.com/GvQmY.png" alt="enter image description here"></p>
  
  <p>The buttons are the right size, I'd just like to keep the text inside.</p>
  
  <p>The group is generated using angularjs. I'd like the <code>&lt;p&gt;</code> text to stay inside the parent div</p>
  
  <pre><code>&lt;div class="btn-group-vertical col-md-3"&gt;
      &lt;div class='btn btn-default' ng-repeat="(route_id, route) in routes"&gt;
          &lt;h2&gt;{{route.short_name}}&lt;/h2&gt;
          &lt;p&gt;{{ route.description }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>