O'Reilly logo

Bootstrap for Rails by Syed Fazle Rahman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Changing Bootstrap's modal size

Bootstrap's modals also come in various sizes: large, normal, and small. You need to use the following classes to change the size of the modal:

  • .modal-lg: This is for larger modals
  • No class: This is for normal sized modals
  • .modal-sm: This is for smaller modals

You have to add the preceding classes to the .modal-dialog element in the modal's markup. Take the following code as an example:

<div class="modal fade" id="myFirstModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">This is a modal</h4>
      </div>
      <div class="modal-body">
        <p>The content goes here.</p>
      </div>
      <div class="modal-footer">
        <p>This is the footer.</p>
      </div>
    </div>
  </div>
</div>

The preceding ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required