How to change bootstrap 4 font size?

Question

I get crisscross information and wanted to raise a question here. In some places, I read that the font size should be changed from the html element, for example:

html { font-size: 14px }

And bootstrap 4 rem values ​​will update the text accordingly.

I wonder if I keep the font size of the html element to its default value and change the bootstrap variables to change the font size, am I doing something wrong?

For instance:

html { font-size: 16px }

// Changing bootstrap variable to 
$font-size-base: 0.875rem //instead of 1rem

Answer 1

With all the confusion and many different answers. I went to the authors of the bootstrap with a question to sort it out once and for all.

$font-size-base, root.

, html, bootstrap.

REF: https://github.com/twbs/bootstrap/pull/24060

Answer 2

Bootstrap base font-size _reboot.scss

body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
}

. -. , , css/js.

, 14px, style.css ( css)

body {
    font-size: 0.875rem;
 }

!important, , .

custom.scss :

$custom-variable:0.875rem;

:

@import "./src/scss/_modules/custom"; 
@import "./bower_components/bootstrap/scss/bootstrap";

body {
font-size:$custom-variable;
}