CODEWITHSUNDEEP
csssassbootstrap-5
Stefan
Stefan

Reputation: 73

Set Bootstrap 5 to custom REM font size

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

Upvotes: 5

Views: 3436

Answers (1)

Arslan Akram
Arslan Akram

Reputation: 1506

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
  <body>
    <p>This is 1.6rem or 16px.</p>
  </body>
</html>

Upvotes: 2

Related Questions