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