Bootstrap 5: How to add a $font-family-serif variable

user_1837734 0
Viewed 2319

I read through the Bootstrap 5 docs about typography and the files _variables.scss and _reboot.scss. I find that there is a SASS variable $font-family-sans-serif to set the font stack for sans serif text, but no corresponding $font-family-serif for serif text.

FWIW: It used to be present in _variables.scss for Bootstrap 3, but seems to missing from Bootstrap 4 as well.

Do I just declare it myself in my _variables_custom.css or is there a canonical way to do it?

Why was it omitted from the standard Bootstrap 5 set of varaibles?

bootstrap-5 typography
1 Answers

Bootstrap (in its SCSS source format) is a framework - a stating point if you will - so it's expected that you add your own variables & elements and/or modify the existing ones. There is no $font-family-serif because its just not required for that core code.

As to how to customise - start with https://getbootstrap.com/docs/5.0/customize/sass

Why was it omitted? - Refactoring. Removing "dead code" (obsolete variables, parameters, fields, methods and/or class') is a very common "code cleaning" practice. A serif font is just not used, so it got deleted. (Not even in BS3 was it "used". It was declared, but not referenced in anything except the customizer.)

But that's the beauty of frameworks - you can just add/delete/change it yourself. :)

Admin1
Related