Set Bootstrap 5 to custom REM font size

user_5751961 0
Viewed 172

I'm currently setting my font-sizes like this to make it easier with calculations in REM values:

html { font-size: 62.5%; } 
body { font-size: 1.6rem; } /* 16px */

However, Bootstrap 5 of course uses the root value (which would be 62.5%) to calculate all of the sizes. It does have variables like $font-size-root and $font-size-base and tried to play with those trying to get it to properly calculate things.

First I tried setting the root to the HTML value and the base to the body value, but that caused the wrong calculations and setting either the base or the root to 1.6rem or 1rem also caused the wrong output.

Does anyone know if it's possible to configure Bootstrap 5 to make it output a value matching with 32px (computed style) when I set this for example:

$h1-font-size: 3.2rem;

That way I could simplify the calculations a lot and Bootstrap would work with the same calculations as the rest of the CSS.

Thanks in advance for the suggestions! I tried a few searches here but couldn't find much related questions sadly

bootstrap-5 sass css
1 Answers

rem units are based on the font-size of the html element and the default size is 16px.

To achieve what you are doing, simple set the font-size: 10px to html. Example:

html { font-size: 10px; }
body { font-size: 1.6rem; } /* This will be 16px */

Now, doing it in Bootstrap 5 requires you to change the SCSS/CSS3 variable for body font-size. Below is an example of how to do it using CSS:

html { font-size: 10px; }

:root {
  --bs-body-font-size: 1.6rem;  /* Overwrite this variable */
  font-size: var(--bs-body-font-size);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
  <body>
    <p>This is 1.6rem or 16px.</p>
  </body>
</html>

user_33317000
Related