Show Bootstrap modal to right most side

Question

We use Javascript to show a Bootstrap modal, what Javascript options should be added to make the Bootstrap modal show to the rightmost side of the page?

This is my code to show a modal (element is the modal)

$(element).modal('show');

What can be added to make the modal show to rightmost side?

Answer 1

You can use something like following in your css file

.modal-dialog {
    margin-top: 1%;
    margin-left: 50%;
}

Adjust margin-left: as per your requirement

Answer 2

You can use default bootstrap class in your modal to move the modal to the right..

Just add mr-0 to the modal-dialog like, <div class="modal-dialog mr-0">

Orelse, You can use css with margin-right: 0 to modal-dialog ..

.modal-dialog {
    margin-right: 0;
}

Working example : https://www.bootply.com/IhPyvzUhJS