Modals

A modal dialog is an effective tool for directing a web user’s attention toward important information. They are designed to interrupt the user to inform them or demand an action. See below for examples and guidelines.

How it works

Before getting started with Bootstrap’s modal component, be sure to read the following as our menu options have recently changed.

  • Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.
  • Clicking on the modal “backdrop” will automatically close the modal.
  • Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.
  • Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
  • Once again, due to position: fixed, there are some caveats with using modals on mobile devices. See our browser support docs for details.
  • Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Live demo

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">Modal title</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate vehicula mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum malesuada metus quis lorem dictum, eu placerat mauris fermentum. Suspendisse pulvinar ligula rhoncus leo viverra ultrices. Etiam sed egestas mi, vel venenatis magna. Quisque vel semper lacus. Nulla sed sagittis erat. Donec pharetra bibendum nulla, malesuada dignissim justo. Curabitur et massa quam. Cras sed mauris et lorem iaculis mattis ut eu velit. Suspendisse at felis risus. Mauris sed ultrices sem, vitae commodo lorem. In lobortis ex nec neque egestas condimentum. Sed vulputate nunc ac tortor vehicula, in euismod turpis ullamcorper. Fusce iaculis risus lacus, a feugiat arcu venenatis et.</p>
      </div>
      <div class="modal-footer">
<button type="button" class="btn btn-primary mr-auto">Save changes</button>
        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>

Optional sizes

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
     <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">Modal title</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate vehicula mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum malesuada metus quis lorem dictum, eu placerat mauris fermentum. Suspendisse pulvinar ligula rhoncus leo viverra ultrices. Etiam sed egestas mi, vel venenatis magna. Quisque vel semper lacus. Nulla sed sagittis erat. Donec pharetra bibendum nulla, malesuada dignissim justo. Curabitur et massa quam. Cras sed mauris et lorem iaculis mattis ut eu velit. Suspendisse at felis risus. Mauris sed ultrices sem, vitae commodo lorem. In lobortis ex nec neque egestas condimentum. Sed vulputate nunc ac tortor vehicula, in euismod turpis ullamcorper. Fusce iaculis risus lacus, a feugiat arcu venenatis et.</p>
      </div>
      <div class="modal-footer">
<button type="button" class="btn btn-primary mr-auto">Save changes</button>
        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
     <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">Modal title</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vulputate vehicula mauris. </p>
      </div>
      <div class="modal-footer">
<button type="button" class="btn btn-primary mr-auto">Save changes</button>
        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>