Overriding line height for headings (h1, h2, h3, h4, h5, h6) variable in Bootstrap 4
Simple online searches didn’t bring this up, but my inspector and some digging in the code did provide a better way to override than re-define the styles:
$headings-line-height
So:
$headings-line-height: 1.2;
in your custom variables file, or anyhow your main global scss file right before loading bootstrap variables, does the same as:
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
line-height: 1.2;
}
Thanks to this code in bootstrap/scss/_type.scss
:
//
// Headings
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
}