Modal header padding

Created by: envolute

It is not possible to assign a different vertical and horizontal padding in the modal header, this breaks the margin of the ".close"

.close { padding: $modal-header-padding; // auto on the left force icon to the right even when there is no .modal-title margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto; }

If you put "padding: .5rem 1rem" the result of the margin would be: margin: -0.5rem 1rem -0.5rem 1rem -0.5rem 1rem auto;

A simple solution would be to split the padding vertically and horizontally. It would look like this:

_variables.scss change: $modal-header-padding: 1rem; for: $modal-header-padding-y: 1rem; => .5rem; $modal-header-padding-x: 1rem;

_modal.scss .modal-header { ... padding: $modal-header-padding-y $modal-header-padding-x; ... }

.close { padding: $modal-header-padding-y $modal-header-padding-x; // auto on the left force icon to the right even when there is no .modal-title margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto; }