Modal

<!-- Modal markup -->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary btn-sm">Save changes</button>
      </div>
    </div>
  </div>
</div>

// Modal markup
.modal(tabindex="-1", role="dialog")
  .modal-dialog(role="document")
    .modal-content
      .modal-header
        h5.modal-title
          | Modal title
        button(type="button", class="close", data-dismiss="modal", aria-label="Close")
          span(aria-hidden="true")
            | ×
      .modal-body
        p
          | Modal body text goes here.
      .modal-footer
        button(type="button", class="btn btn-secondary btn-sm", data-dismiss="modal")
          | Close
      button(type="button", class="btn btn-primary btn-sm")
        | Save changes

<!-- Make sure the actual modal markup is present on the page and has the right id -->

<!-- Launch small modal -->
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#modalSmall">
  Small modal
</button>

<!-- Launch default modal -->
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#modalDefault">
  Default modal
</button>

<!-- Launch large modal -->
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#modalLarge">
  Large modal
</button>

<!-- Launch extra large modal -->
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#modalXL">
  Extra large modal
</button>

<!-- Launch long modal -->
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#modalLong">
  Long modal
</button>

<!-- Launch modal with srolling content -->
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#modalScroll">
  Srolling content
</button>

<!-- Launch vertically centered modal -->
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#modalCentered">
  Vertically centered modal
</button>

//  Make sure the actual modal markup is present on the page and has the right id

// Launch small modal
button(type="button", class="btn btn-outline-secondary", data-toggle="modal", data-target="#modalSmall")
  | Small modal

// Launch default modal
button(type="button", class="btn btn-outline-secondary", data-toggle="modal", data-target="#modalDefault")
  | Default modal

// Launch large modal
button(type="button", class="btn btn-outline-secondary", data-toggle="modal", data-target="#modalLarge")
  | Large modal

// Launch extra large modal
button(type="button", class="btn btn-outline-secondary", data-toggle="modal", data-target="#modalXL")
  | Extra large modal

// Launch long modal
button(type="button", class="btn btn-outline-secondary", data-toggle="modal", data-target="#modalLong")
  | Long modal

// Launch modal with srolling content
button(type="button", class="btn btn-outline-secondary", data-toggle="modal", data-target="#modalScroll")
  | Srolling content

// Launch vertically centered modal
button(type="button", class="btn btn-outline-secondary", data-toggle="modal", data-target="#modalCentered")
  | Vertically centered modal