How to change the font size with Sass in Bootstrap 4?

Question

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:

Answer 1

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;