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; }