title: Twitter Bootstrap 3 Modal with Scrollable Body
body: <p>I am moving from Bootstrap 2 to Bootstrap 3. In the old version, I was using modals which had long content, and the modals automatically scrolled when a given max height was reached.</p>
  
  <p>In Bootstrap 3, the modal just extends to show the entire content, and I have to use page down key to actually get to the end of it and see the buttons in the modal footer. I cannot use the scrollbar in the far right of the browser window, because it is covered by the backdrop, and in any case that would not be intuitive to scroll just the content in the modal box.</p>
  
  <p>How can I achieve a modal in bootstrap 3 that automatically inserts a scrollbar to scroll content when a maximum height is reached? </p>
  
  <p>I tried setting max height to the modal class, like this:</p>
  
  <pre><code>.modal{
     max-height:80%;
  }
  .modal-header{
     height:15% !important;    
  }
  .modal-body{
     height:70%;
     overflow:auto;
  }
  .modal-footer{
     height:15%;
  }
  </code></pre>
  
  <p>But it doesn't work as expected. The modal window does reach a maximum size, but it just cuts its content there and the footer is not even displayed.</p>
  
  <p>Thanks for any help.</p>