Basic


<div class="text-center">
    <button type="button" class="btn btn-primary mr-2" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch modal
    </button>
</div>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>
            <div class="modal-body">
                <p class="modal-text">Mauris mi tellus, pharetra vel mattis sed, tempus ultrices eros. Phasellus egestas sit amet velit sed luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus ultrices sed urna ac pulvinar. Ut sit amet ullamcorper mi. </p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-bs-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

Optional sizes

Use .modal-xl class for extra large, .modal-lg class for large and .modal-sm for small ( modal ).

Vertically centered

Use .modal-dialog-centered class to vertically align modal.

Remove animation

Remove .fade class to remove animation.

Animation Style Modal

Use the following class given below for modal animation.

.fadeInDown

.slideInUp

.fadeInUp

.rotateInDownLeft

.fadeInLeft

.zoomInUp

.fadeInRight

Custom

More Custom Modals.

Video

Bootstap Modal has been extended to use videos inside them.



<!-- Youtube -->

<button id="yt-video-link" type="button" class="btn btn-primary mb-2 me-4">Play Youtube</button>

<!-- Modal -->
<div class="modal fade" id="videoMedia1" tabindex="-1" role="dialog" aria-labelledby="videoMedia1Label" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header" id="videoMedia1Label">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="video-container yt-container">
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Vimeo -->

<button id="vimeo-video-link" type="button" class="btn btn-primary mb-2 mr-2">Play Vimeo</button>
<!-- Modal -->
<div class="modal fade" id="videoMedia2" tabindex="-1" role="dialog" aria-labelledby="videoMedia2Label" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header" id="videoMedia2Label">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="video-container vimeo-container">
                </div>
            </div>
        </div>
    </div>
</div>

function addVideoInModal(btnSelector, videoSource, modalSelector, iframeHeight, iframeWidth, iframeContainer) {
    var myModal = new bootstrap.Modal(document.getElementById(modalSelector), {
        keyboard: false
    })            
    document.querySelector(btnSelector).addEventListener('click', function() {
        var src = videoSource;
        myModal.show('show');
        var ifrm = document.createElement("iframe");
        ifrm.setAttribute("src", src);
        ifrm.setAttribute('width', iframeWidth);
        ifrm.setAttribute('height', iframeHeight);
        ifrm.style.border = "0";
        ifrm.setAttribute("allow", "encrypted-media");
        document.querySelector(iframeContainer).appendChild(ifrm);
    })
}

<!-- Youtube -->
addVideoInModal('#yt-video-link', 'https://www.youtube.com/embed/YE7VzlLtp-4', 'videoMedia1', '315', '560', '.yt-container')

<!-- Vimeo -->
addVideoInModal('#vimeo-video-link', 'https://player.vimeo.com/video/1084537', 'videoMedia2', '315', '560', '.vimeo-container')

Copyright © 2026 DesignReset, All rights reserved.

Coded with