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

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

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

Solution 3

I'd suggest you to update directly the html {font-size: 16px} property instead of changing Bootstrap's $font-size-base, for several reasons:

1. html's font size will be directly used in calculating final font size. There's no benefit to use an "intermediary", that is, body that is being adjusted by Bootstrap's $font-size-base.

2. Bootstrap's SCSS system calculate heading size etc using $font-size-base, so all Bootstrap affected CSS rule will be affected, which includes body (set into $font-size-base$).
   However, browser calculate any CSS font size rule in rem relative to html {font-size}, not from $font-size-base affected elements (like body).

3. Setting html {font-size} using px will affect any rem value, both inside and outside Bootstrap affected elements, if this is what you want to achieve.

Conversely, if you only want to set sizes for Bootstrap-affected-elements, do set the $font-size-base relative to html {font-size}, so CSS elements outside of Bootstrap will not be affected. But I'd say this is more of an edge case, instead of the norm.

Note:
If you're setting $font-size-base or any other Bootstrap variables, you don't have to modify variables.scss file. You should define variables before importing node_modules/bootstrap/scss/variables and other Bootstrap files, so your values got used instead of !default values set in Bootstrap. The advantages: no need to edit the whole variables.scss file.

Comments

[webkitfanz]

Yes I am using overrides, I never would change anything in the core files...its basic common sense... But that doesn't really answer my question... why can I not change the base values in bootstrap variable using override method?

[webkitfanz]

so I am pulling in the bootstrap source with @import then I am using a custom file to modify the variables (leaving bootstrap files untouched).

[Mr. Pyramid]

yeah in custom css file you can add this code to modify it after @import however you can directly add resouces like mentioned in bootstrap docs. and at the last of your can your custom to override default with your custom css.

[webkitfanz]

So you are saying as long as I change the variables using a separate file (for obvious reasons); this should be ok? If you change your answer to reflect that I will accept.

[webkitfanz]

My question is directly related to changing the bootstrap variable using an external file. So in essence I am not altering the bootstrap files rather using the _custom.scss to change base font of bootstrap. So instead of 1rem I am going to use 0.875rem; Doing it will not lose any functionality of bootstrap. If you are saying I should not change the base font size of bootstrap, can you back up your theory as to why?

[Mr. Pyramid]

check it now I got confused with $font-size-base and thought you have this variable I hope I got you right.

[Hosam Elzagh]

some time we must change in file stackoverflow.com/questions/53123544/…

[Mr. Pyramid]

You can but add your own class along with it so that you can preserve your default value. changing directly into files is what I won't recommend any one to do.

[lsblsb]

A good article: coursetro.com/posts/design/73/…

[lsblsb]

You find a list of all variables here: github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

[David Bulté]

$font-size-base is defined twice, once in rem and once in px. Which one do you recommend?

[B Medeiros]

Changing $font-size-base to a pixel value rather than a rem value does not even compile scss styles, I could not find anything that supports it is better than html { font-size: 12px; }

[Dave]

it looks like the display-* classes don't honour the $font-size-base unfortunately github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L‌​311

[user1467439]

This is something that probably needs to be fixed.

[therealbene]

I added this answer due to previous answers not considering use case where CSS rule of elements not affected by Bootstrap (which IMO is the norm), and also adding suggestion on overriding default Bootstrap variables in what I consider the most practical way (example using NPM / NodeJS workflow).