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:

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 

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; 

Answer 2

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; }