How to do Modal Bootstrap appear on bottom

Something like that will do the work. Now you need to play with paddings, margins and width to adjust your modal;

.modal-dialog {
   position:fixed;
   top:auto;
   right:auto;
   left:auto;
   bottom:0;
}  

Use modal-dialog, not modal, otherwise the modal won't disappear if you click above it.

https://jsfiddle.net/9fg7jsu3/2/

On the <div class="modal-dialog" ... use this,

<div class="modal-dialog modal-dialog-centered" style="align-items: flex-end;">
    ...
</div>