This revamps the modal to use flexbox for it's .modal-content, .modal-header, .modal-body, and .modal-footer elements. This requires some markup changes on your end, but comes with added flexibility around customizing placement and alignment of content within a modal. Here's what's changed.
Modals now use display: flex and flex-direction: column. While likely an edge case, this allows for easy changes in orientation and alignment. For example, add .flex-row and .align-items-start to get started with a horizontal modal layout.
Modal headers and footers now use display: flex and some flex alignment properties.
In the header, we flipped the order of the DOM elements (dismiss used to come first, not it comes last) and then align the contents to the edges. In the footer, we made no markup changes, but also added display: flex with some flex alignment properties. In addition, the footer also has some horizontal margin love for easily spacing buttons and more (since flexbox doesn't render HTML spaces like inline-block does).
Modal body is set to grow, should you add a fixed height to a .modal-content. This ensures that no matter the height on .modal-content, your .modal-body will grow to keep the header at the very top and the footer at the very bottom.
I still plan on exploring some more flexbox things here, but o