I am getting crisscross information and wanted to raise the issue here. I have read in some places the font size should be changed from the html element for example:
html { font-size: 14px }
And the bootstrap 4 rem values will update the text accordingly.
Interestingly if I keep the html element's font-size to its default and change the bootstrap variables to change the font size, am I doing something wrong?
For example:
html { font-size: 16px }
// Changing bootstrap variable to
$font-size-base: 0.875rem //instead of 1rem
With all the confusion and so many different answers. I approached the authors of bootstrap with the question to clear it up once and for all.
It is now crystal that we will need to change $font-size-base which will directly change the root font-size.
I was also advised by their contributor to not control the font-size with html element rather change the bootstrap's variable instead.
REF: https://github.com/twbs/bootstrap/pull/24060
Caution about using just CSS override
using the supplied css example will not work for all aspects of bootstrap sizing.
The compiled result of scss uses the $font-size-base
variable to size many things and may be used in more areas in the future.
List of sized elements
- dropdown font
- button font
- popover font
- input-group font
- forms font
- reboot font
-------------- Example SCSS --------------
This is an example for your scss files, note that you need to define the $font-size-base
BEFORE including bootstrap in your main scss file. In this case, the app.scss
file is the one being compiled.
app.scss
// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables -- this is where you defined the variables
// BEFORE importing bootstrap which will use it's
// defaults if the variable is not predefined.
@import "variables";
// Bootstrap
@import '~bootstrap/scss/bootstrap';
// DataTables https://datatables.net/download/npm#DataTables-core
// @import "datatables";
@import "datatables.min";
_variables.scss
// Body
$body-bg: #ffffff;
// Typography
$font-size-base: 12px; // this changes the font-size throughout bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
Bootstrap defines base font-size
in it's _reboot.scss
as
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;
}
NOTE:- Never change default values into frameworks files always modify values using custom css/js files.
so in order to change your font-size to 14px
use this in your own style.css
(custom css file)
body {
font-size: 0.875rem;
}
Here is the working fiddle
use !important
you are not able to see your changes to override your change on default.
In your custom.scss
file do like this:
$custom-variable:0.875rem;
Then use it like this:
@import "./src/scss/_modules/custom";
@import "./bower_components/bootstrap/scss/bootstrap";
body {
font-size:$custom-variable;
}