Bootstrap Modal

Modals are streamlined, but flexible, dialog prompts. They are built using HTML, CSS, and JavaScript. They are positioned over everything else in the document and remove scroll from the main <body> so that modal content scrolls securely over the page.

Basic Modal Example

To trigger a modal window on click, you need a button and the modal markup itself.

The triggering element uses `data-bs-toggle="modal"` and `data-bs-target="#myModal"`.
The modal component requires several nested wrappers: `.modal`, `.modal-dialog`, and `.modal-content`.
The `.modal-content` is then divided into `.modal-header`, `.modal-body`, and `.modal-footer`.

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

<!-- Modal Markup -->
<div class="modal fade" id="basicModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Static Backdrop

By default, clicking outside the modal will close it. When you specify data-bs-backdrop="static" along with data-bs-keyboard="false", the modal will not close when the user clicks outside it or hits the Escape key. This forces the user to interact with the modal's internal buttons.

<!-- Notice the added data attributes -->
<div class="modal fade" id="staticBackdropModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
    ...
</div>

Scrolling Long Content

When modals become too long for the user's viewport, they scroll independent of the page itself. However, you can also create a scrollable modal that allows the modal body to scroll securely by adding .modal-dialog-scrollable to .modal-dialog.

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

Vertically Centered Modal

By default, modals slide down from the top. However, you can make a modal perfectly vertically centered in the viewport by adding the .modal-dialog-centered class to your .modal-dialog element.

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

Optional Modal Sizes

Modals possess three optional sizes, which are implemented via modifier classes placed right alongside standard .modal-dialog. The options are small (.modal-sm), large (.modal-lg), and extra large (.modal-xl).

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

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

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

« Previous Lesson Next Lesson »