Prevent Bootstrap Modal from Closing when Clicking Outside by using CSS

By expanding the .modal-dialog class dimensions to full window, we can avoid the outside click closing issue.

CSS

.modal {
    background-color: rgba(0,0,0,0.5);
}
.modal-dialog{
    width: 100%;
    height: 100vh;
    margin: 0 !important;
}
.modal-content {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: auto;
    top: 15%;
}
@media (min-width: 600px){
.modal-content {
    width: 700px;
}
}

Demo

See the Pen Prevent the Bootstrap Modal Closing when Clicking Outside the modal by Vinothkumar Rajendran (@fedtutorial) on CodePen.0