Often several modal on a web page has almost same content with minor differences.

You can use the modal events to create slightly different modal windows based on the same modal HTML. The following example will show you how to change the title of the modal window according to the trigger button’s data-title attribute value.

Example

jQuery JavaScript

<script>
$(document).ready(function() {
    $("#myModal").on("show.bs.modal", function(event) {
        // Get the button that triggered the modal
        var button = $(event.relatedTarget);

        // Extract value from the custom data-* attribute
        var titleData = button.data("title");

        // Change modal title
        $(this).find(".modal-title").text(titleData);
    });
});
</script>

Creating Vertically Centered Modal

Simply add the class .modal-dialog-centered to .modal-dialog element to vertically center the modal. If modal has long content you can additionally apply the class .modal-dialog-scrollable on .modal-dialog to make the modal body scrollable. Here’s an example:

Example

<!-- Button HTML (to Trigger Modal) -->
<a href="#modalCenter" role="button" class="btn btn-primary" data-bs-toggle="modal">Vertically Centered Modal</a>

<!-- Modal HTML -->
<div id="modalCenter" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Vertical Alignment Demo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur elit...</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">OK, Got it!</button>
            </div>
        </div>
    </div>
</div>

Using the Grid inside Modals

You can also utilize the Bootstrap grid system to create grid layouts within a modal. Simply, use the .row class to create rows and use .col-*, .col-sm-*, .col-md-*, .col-lg-* and .col-xl-* classes to create columns within the .modal-body. Let’s check out an example:

Example

<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Send Us a Message</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label>First Name</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <label>Comments</label>
                            <textarea class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Send Email</button>
            </div>
        </div>
    </div>
</div>

Loading Content in Modal via Ajax

You can also load remote content inside the Bootstrap modal via Ajax.

In the following example content inside the modal body will be inserted from a remote file upon activation using the jQuery load() method and Bootstrap show.bs.modal event.

Example

jQuery JavaScript

<!-- jQuery Code (to Load Content via Ajax) -->
<script>
$(document).ready(function() {
    $("#myModal").on("show.bs.modal", function() {
        // Place the returned HTML into the selected element
        $(this).find(".modal-body").load("remote.php");
    });
});
</script>

<!-- Button HTML (to Trigger Modal) -->
<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Launch Demo Modal</button>
    
<!-- Modal HTML -->
<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ajax Loading Demo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Content will be loaded here from "remote.php" file -->
            </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">OK, Got it!</button>
            </div>
        </div>
    </div>
</div>

Tip: You can also place tooltips and popovers within the modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.