How to Change the Font Size with SASS in Bootstrap 4

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

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;

How can I edit the font size of heading in bootstrap and sass

NOTE: Never change default values in bootstrap files instead always modify values using custom CSS/JS files.

try this code :

    @import "../node_modules/bootstrap/scss/_functions";
    @import "../node_modules/bootstrap/scss/_variables";
    @import "../node_modules/bootstrap/scss/_utilities";
                
$h1-font-size: 7rem;
$h2-font-size: 6rem;
$h3-font-size: 5rem;
$h4-font-size: 4rem;
$h5-font-size: 3rem;
$h6-font-size: 2rem;
                
    @import "../node_modules/bootstrap/scss/bootstrap";

Check the bootstrap documentation you can change the font size variables

https://getbootstrap.com/docs/5.0/utilities/text/#font-size

How to change Bootstrap 4 heading font sizes on various screen widths with SASS?

You can't reassign the value of a variable inside a @media query, but you can use the value of a variable inside a @media query. For example,

@media (min-width: 768px) and (max-width: 991.98px) {
    h1, .h1 { font-size: $font-size-base * 2.222; }
    h2, .h2 { font-size: $font-size-base * 1.777; }
    h3, .h3 { font-size: $font-size-base * 1.388; }
    h4, .h4 { font-size: $font-size-base * 1.222; }
} 

Demo: https://www.codeply.com/go/8wiWhxkaFZ

---

Also note: there's a typo in your largest media query. It should be min-width not max-width.

@media (min-width: 992px) and (max-width: 1200px) {

How to change the font size of a class to make it responsive using Bootstrap4 with sass?

You can specify it different ways. You could replace the entire h3 line in your _type.scss with the following and modify the values to suit your needs:

@include media-breakpoint-up(sm) {
  h3, .h3 { $font-size-base * 1.25 !default; }
}

@include media-breakpoint-up(md) {
  h3, .h3 { $font-size-base * 1.5 !default; }
}

@include media-breakpoint-up(lg) {
  h3, .h3 { $font-size-base * 1.75 !default; }
}

Personally I don't typically like to modify the default framework partials though, so you can easily go back to defaults. Doing this can also create upgrade headaches later on. So what I would do is create another partial called _custom_type.scss, add the above code to it, and compile it into your CSS, just make sure to add your custom overrides after the defaults.

How to Customize Bootstrap 5 Font Size for fs-* class in SASS variables

You would modify the "font-size" utility using the Utilities API. Merge the new values with the existing $font-sizes map...

@import "functions";
@import "variables";
@import "utilities";

$font-sizes: (
  1: 12rem,
  2: 10rem,
  3: 7rem,
  4: 5rem,
  5: 3rem,
  6: 2rem,
);

$utilities: map-merge(
  $utilities,
  (
    "font-size": map-merge(
      map-get($utilities, "font-size"),
      (
        values: $font-sizes,
      ),
    ),
  )
);

@import "bootstrap";

SASS Demo

---

Related: Add new utilities with Bootstrap 5

How can I change the size of the font in Bootstrap 4 with just CSS?

It depends how/where you're changing it. It should work fine. Make sure the custom CSS you're adding follows the bootstrap.css, and you shouldn't need to use !important

Demo: https://www.codeply.com/go/R9dGnr6AXn

How do I implement responsive typography with Bootstrap 4?

This is a Sass feature.

To have access to the media-breakpoint mixins and the size variables, you need to:

1. add a custom.scss file
2. @import "node_modules/bootstrap/scss/bootstrap";
3. and setup a Sass compiler

https://getbootstrap.com/docs/4.0/getting-started/theming/

Change Bootstrap 4 text colors

Override body-color. In CSS text color of an element is controlled by the confusingly named color property. So the name of the bootstrap variable is derived from that.

How to change Bootstrap's global default font size?

There are several ways but since you are using just the CSS version and not the SASS or LESS versions, your best bet to use Bootstraps own customization tool:

http://getbootstrap.com/customize/

Customize whatever you want on this page and then you can download a custom build with your own font sizes and anything else you want to change.

Altering the CSS file directly (or simply adding new CSS styles that override the Bootstrap CSS) is not recommended because other Bootstrap styles' values are derived from the base font size. For example:

https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L52

You can see that the base font size is used to calculate the sizes of the h1, h2, h3 etc. If you just changed the font size in the CSS (or added your own overriding font-size) all the other values that used the font size in calculations would no longer be proportionally accurate according to Bootstrap's design.

As I said, your best bet is to just use their own Customize tool. That is exactly what it's for.

If you are using SASS or LESS, you would change the font size in the variables file before compiling.

---

Related Topics