Bootstrap Modals

In bootstrap, modals are like popups or dialog windows to display important information on top of the current page.

 

The bootstrap modals are useful when we want to show the notifications or important alert messages to the users while performing actions like deleting, inserting, etc. on the current page.

Bootstrap Create a Modal

In bootstrap, we can create the modal by wrapping the modal content inside of <div> element with .modal class.

 

Following is the example of creating the modal and showing it on button click in bootstrap.

 

Live Preview

<!-- Button to Trigger the Modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sampleModal">

    Launch modal

</button>

<div class="modal" id="sampleModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <!--Modal Header-->  

            <div class="modal-header">

                <h5 class="modal-title">Modal Title</h5>

                <button type="button" class="close" data-dismiss="modal">

                    <span>&times;</span>

                </button>

            </div>

            <!--Modal Body -->

            <div class="modal-body">

                <p>Modal body content will be here.</p>

            </div>

            <!--Modal Footer-->

            <div class="modal-footer">

                <button type="button" class="btn btn-success">Save</button>

                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

If you observe the above code, we added data-target="#sampleModal" attribute to the button to open the modal on button click.

 

The above example will return the result like as shown below.

 

Bootstrap Modal Example Result

Bootstrap Animated Modal

If you observe the above example result, the modal is opening and closing without having any fade or animation effect on the button click. In case, if you want to animate or fade the modal while opening or closing then add .fade class to the wrapping container (<div>) along with .modal class.

 

Live Preview

<!-- Button to Trigger the Modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sampleModal">

    Launch modal

</button>

<div class="modal fade" id="sampleModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <!--Modal Header-->  

            <div class="modal-header">

                <h5 class="modal-title">Modal Title</h5>

                <button type="button" class="close" data-dismiss="modal">

                    <span>&times;</span>

                </button>

            </div>

            <!--Modal Body -->

            <div class="modal-body">

                <p>Modal body content will be here.</p>

            </div>

            <!--Modal Footer-->

            <div class="modal-footer">

                <button type="button" class="btn btn-success">Save</button>

                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

The above example will return the result like as shown below.

 

Bootstrap modal with animation effect example result

Bootstrap Modal Sizes

In bootstrap, by default the modals are in medium size. In case, if you want to change the modal size to small, large or extra-large you can use .modal-sm, .modal-lg, and .modal-xl classes based on our requirements.

 

To change the default size of modal, you need to add either .modal-sm, .modal-lg or .modal-xl class along with .modal-dialog class like as shown below.

 

Live Preview

<!-- Small modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#smallModal">

    Small modal</button>

<div class="modal fade" id="smallModal">

    <div class="modal-dialog modal-sm">

        <div class="modal-content">

            ...

        </div>

    </div>

</div>

 

<!-- Default modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#defaultModal">Default modal</button>

<div class="modal fade" id="defaultModal">

    <div class="modal-dialog">

        <div class="modal-content">

            ...

        </div>

    </div>

</div>

 

<!-- Large modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#lgModal">Large modal</button>

<div class="modal fade" id="lgModal">

    <div class="modal-dialog modal-lg">

        <div class="modal-content">

            ...

        </div>

    </div>

</div>

 

<!-- Extra large modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#xlModal">Extra large modal</button>

<div class="modal fade" id="xlModal">

    <div class="modal-dialog modal-xl">

        <div class="modal-content">

            ...

        </div>

    </div>

</div>

Bootstrap Vertically Centered Modal

In bootstrap, by adding .modal-dialog-centered class to .modal-dialog we can center the modal vertically and horizontally on the page.

 

Live Preview

<!-- Button to Trigger the Modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sampleModal">

    Launch modal

</button>

<div class="modal" id="sampleModal">

    <div class="modal-dialog modal-dialog-scrollable">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Tutlane Note</h5>

                <button type="button" class="close" data-dismiss="modal">

                    <span>&times;</span>

                </button>

            </div>

            <div class="modal-body">

                <p>Tutlane.com is an eLearning organization providing quality online tutorials, articles, and information related to the latest programming technologies.</p>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

Bootstrap Scrollable Modal

In bootstrap, by default the scrollbar will be added to the page to scroll the modal when the content of modal become too large for user’s device.

 

Live Preview

<!-- Button to Trigger the Modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sampleModal">

    Launch modal

</button>

<div class="modal" id="sampleModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Modal with Page Scroll</h5>

                <button type="button" class="close" data-dismiss="modal">

                    <span>&times;</span>

                </button>

            </div>

            <div class="modal-body">

                <p>Content Here.</p>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

In case, if you want to enable a scroll for the modal content to scroll inside of the modal instead of page, then you need to add .modal-dialog-scrollable to .modal-dialog.

 

Live Preview

<!-- Button to Trigger the Modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sampleModal">

    Launch modal

</button>

<div class="modal" id="sampleModal">

    <div class="modal-dialog modal-dialog-scrollable">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title">Modal with Page Scroll</h5>

                <button type="button" class="close" data-dismiss="modal">

                    <span>&times;</span>

                </button>

            </div>

            <div class="modal-body">

                <p>Content Here.</p>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

Bootstrap Show/Hide Modal via JavaScript

If you observe the above examples, we are showing the modal on button click using data-target attribute. Instead, we can also show/hide the modal on button click using JavaScript with bootstrap modal() method like as shown below.

 

Live Preview

<script>

    $(function() {

        // Show modal on button click

        $("#btnShow").click(function() {

            $("#sampleModal").modal("show");

        });

        // Hide modal on button click

        $("#btnHide").click(function() {

            $("#sampleModal").modal("hide");

        });

    });

</script>

You can also use toggle property to show/hide the modal on button click using JavaScript like as shown below.

 

Live Preview

<script>

    $(function() {

        // Toggle the modal on button click

        $("#btnShow").click(function() {

            $("#sampleModal").modal("toggle");

        });

    });

</script>

Bootstrap Modal Events

In bootstrap, the modal classes are having few events for hooking into modal functionality to fire the events during opening or closing the modal.

 

Following are the modal events which are available in bootstrap.

 

Modal EventDescription
show.bs.modal This event will trigger before the modal window is shown
shown.bs.modal This event will trigger after the modal window is visiable to the user.
hide.bs.modal This event will trigger before the modal window is hidden
hidden.bs.modal This event will trigger after the modal window is hidden

Following is the example of using the events to show the alert message during opening and closing the modal in bootstrap.

 

Live Preview

<script>

    $(function() {

        $("#sampleModal").on('show.bs.modal', function(event) {

            alert('The modal window will be shown now');

        });

        $("#sampleModal").on('hidden.bs.modal', function(event) {

            alert('The modal window is dismissed');

        });

    });

</script>

This is how we can use the modals in our applications to show the important information on top of the page based on our requirements.