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