Bootstrap: Responsive Display Headings

[sunyang713]

I really like these larger, thinner headings that are provided:

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

As shown here: https://v4-alpha.getbootstrap.com/content/typography/#display-headings

But I've find that on smaller screens, these are almost always way too large. Could you consider adding responsive breakpoints like so:

<h1 class="display-l-1">Display 1</h1>
<h1 class="display-l-2">Display 2</h1>
<h1 class="display-md-3">Display 3</h1>
<h1 class="display-md-4">Display 4</h1>

so that the text can return to the standard h1 h2 etc font style on smaller screens?

[MartijnCuppens]

This could be solved with #23816
Result: http://martijncuppens.github.io/rfs/docs/4.0/content/typography/#display-headings

[knalette]

This is still an issue. Any plans to fix?

[prashaddey]

I'm still facing the same issue. They haven't fixed it yet, I guess.

[knalette]

I just added this in my custom.scss, which worked for the sites I've been working on:

@media (max-width: 575.98px) {
//Manage Display Headers for Mobile Devices
.display-1 {
font-size: 3rem;
font-weight: 300;
line-height: 1.0;
}

    .display-2 {
        font-size: 2.75rem;
        font-weight: 300;
        line-height: 1.0;
    }

    .display-3 {
        font-size: 2.25rem;
        font-weight: 300;
        line-height: 1.0;
    }

    .display-4 {
        font-size: 1.75rem;
        font-weight: 300;
        line-height: 1.0;
    }

}

[XhmikosR]

Closing this due to the Responsive Font sizes PR.

[anandchakru]

am curious, why this is not incorporated into the framework itself yet?

[ck9sky]

@anandchakru, kind of wonder why, seems like a good fix??