Why is there no responsive typography in Bootstrap?

[martonteker]

I'm a junior front-end developer and I've recently turned Bootstrap into my daily driver when developing webpages and web apps. However, I don't see the reason behind Bootstrap not having a responsive typography 'engine'. Why hasn't it been implemented (yet)?

[patrickhlauke]

i'll leave it up to @mdo / others to perhaps provide a fuller answer, but for my own part, i wouldn't be adverse to it. i'll note that (badly implemented) responsive typography solutions often cause problems for users who try to zoom pages in order to, well, make the text bigger/more readable. it's also very much dependent on the specific needs you have for your particular projects, not necessarily something that can be tackled with a one-size-fits-all solution. lastly, as with most open source projects "why hasn't it been implemented?" really translates to "why hasn't somebody else implemented this?".

[martonteker]

Thank you for the quick and thoughtful response. I think that a quickly Sass-configurable module that can be turned on/off easily would be cool. As you mentioned, a one-size-fits-all solution with myriads of viewport sizes and aspect ratios out there would be quite tricky - if not senseless and almost impossible - to implement. Or at least with the current development level of CSS it is.

[coliff]

I'd like to see this feature added too :-) I know that @MartijnCuppens has been working on this and there is an open PR for it which looks promising. REF: #23816

[sts-ryan-holton]

I tend to update the typography classes such as display headings via one or two breakpoints. I initially set my own size for the $display4-size variable for example, and then a media query might look like this:

In SCSS:

@media (max-width: 992px) {

  p {
    font-size: ($font-size-base - .1em);
  }
  
  .display-4 {
    font-size: ($display4-size - .4em);
  }
  
  .display-3 {
    font-size: ($display3-size - .8em);
  }
  
  // etc...
  
}

I tend to only do this once in a more generic breakpoint such as 992px and below so that I don't make messy code.

I'm sure there's other ways of doing it.

[andresgalante]

what @patrickhlauke said.

Also as @coliff mention, we have an open PR by @MartijnCuppens related to responsive font size. @Kisteker you can probably read that PR and keep the discussion going there. You might see the reasons why we would or wouldn't do it.

And if you'd like to take advantage of Martjin's work, he also built a stand-alone project https://github.com/project-rfs/rfs

[XhmikosR]

#23053