# Modals

Dialogs with different sizes, animations, and forms

##### Basic Modal

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

    <!-- Modal -->
    <div class="modal fade" id="basicModal" tabindex="-1" aria-labelledby="basicModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="basicModalLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            Woo-hoo, you're reading this text in a modal!
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

##### Modal Sizes

    <!-- Small modal -->
    <div class="modal-dialog modal-sm">
      ...
    </div>

    <!-- Large modal -->
    <div class="modal-dialog modal-lg">
      ...
    </div>

    <!-- Extra large modal -->
    <div class="modal-dialog modal-xl">
      ...
    </div>

##### Fullscreen Modal

    <!-- Full screen modal -->
    <div class="modal-dialog modal-fullscreen">
      ...
    </div>

    <!-- Full screen below sm -->
    <div class="modal-dialog modal-fullscreen-sm-down">
      ...
    </div>

##### Vertically Centered

    <!-- Vertically centered modal -->
    <div class="modal-dialog modal-dialog-centered">
      ...
    </div>

    <!-- Vertically centered scrollable modal -->
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
      ...
    </div>

##### Modal with Form

    <div class="modal fade" id="formModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">New message</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <form>
              <div class="mb-3">
                <label for="recipient-name" class="col-form-label">Recipient:</label>
                <input type="text" class="form-control" id="recipient-name">
              </div>
              <div class="mb-3">
                <label for="message-text" class="col-form-label">Message:</label>
                <textarea class="form-control" id="message-text"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Send message</button>
          </div>
        </div>
      </div>
    </div>

##### Static Backdrop

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropModal">
      Launch static backdrop modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="staticBackdropModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            I will not close if you click outside me. Don't even try to press escape key.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Understood</button>
          </div>
        </div>
      </div>
    </div>

##### Scrolling Long Content

    <!-- Scrollable modal -->
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5">Modal title</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <p>This is some placeholder content to show the scrolling behavior for modals...</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>

##### All Modal Sizes Demo

    <!-- Extra small modal -->
    <div class="modal-dialog modal-sm"></div>

    <!-- Default modal -->
    <div class="modal-dialog"></div>

    <!-- Large modal -->
    <div class="modal-dialog modal-lg"></div>

    <!-- Extra large modal -->
    <div class="modal-dialog modal-xl"></div>

# Modal title

Woo-hoo, you're reading this text in a modal!

# Small modal

This is a small modal.

# Large modal

This is a large modal with more space for content.

# Extra large modal

This is an extra large modal with maximum space for content.

# Full screen modal

This is a fullscreen modal that covers the entire viewport.

# Full screen below sm

This modal is fullscreen below the sm breakpoint.

# Vertically centered modal

This is a vertically centered modal.

# New message

Recipient:
Message:

# Modal title

I will not close if you click outside me. Don't even try to press escape key.