How to change the font size with Sass in Bootstrap

2019-02-08 07:17发布

问题:

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

回答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;


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