Basic

Basic Bootastap 4 Modal.

<!-- 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="close" data-dismiss="modal" aria-label="Close">
                    <svg> ... </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-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

Vertically centered

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

Remove animation

Remove .fade class to remove animation.

Optional sizes

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

Video

Animation Style Modal

Use the following class given below for modal animation.

.fadeInDown

.slideInUp

.fadeInUp

.rotateInDownLeft

.fadeInLeft

.zoomInUp

.fadeInRight

Custom

More Custom Modals.