A guide to adjusting font sizes using Sass in Bootstrap 4

Question

A guide to adjusting font sizes using Sass in Bootstrap 4

I'm feeling a bit confused as I've come across conflicting information regarding font sizes. Some sources suggest changing the font size from the HTML element like this:

html { font-size: 14px }

Then Bootstrap 4 rem values will adjust the text accordingly.

However, I noticed that if I leave the html element's font size at its default and only change the bootstrap variables to alter the font size, is that incorrect?

For instance:

html { font-size: 16px }

// Changing bootstrap variable to 
$font-size-base: 0.875rem //instead of 1rem

css twitter-bootstrap sass bootstrap-4

Answer 1

Answer №1

After encountering numerous conflicting answers, I decided to reach out to the developers of bootstrap for clarification once and for all.

It has become apparent that modifying $font-size-base is essential as it directly impacts the root font-size.

Their contributor also advised against manipulating the font-size using the html element and recommended adjusting bootstrap's variable instead.

Reference: https://github.com/twbs/bootstrap/pull/24060

Warning regarding sole CSS overrides

Simply applying css overrides may not suffice for all aspects of bootstrap sizing.

The compiled scss result heavily relies on the $font-size-base variable for sizing various elements, which could potentially expand to more areas in the future.

List of elements affected by size changes

dropdown font
button font
popover font
input-group font
forms font
reboot font

-------------- Sample SCSS --------------

Below is a snippet for your scss files; remember to define the $font-size-base BEFORE incorporating bootstrap into your main scss file. In this scenario, the app.scss file is being compiled.

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables -- where you specify the variables 
//              PRIOR to importing bootstrap, which utilizes its  
//              defaults if the variable is unspecified.
@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; // adjusts the font-size across bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

Answer 2

After encountering numerous conflicting answers, I decided to reach out to the developers of bootstrap for clarification once and for all.

It has become apparent that modifying $font-size-base is essential as it directly impacts the root font-size.

Their contributor also advised against manipulating the font-size using the html element and recommended adjusting bootstrap's variable instead.

Reference: https://github.com/twbs/bootstrap/pull/24060

Warning regarding sole CSS overrides

Simply applying css overrides may not suffice for all aspects of bootstrap sizing.

The compiled scss result heavily relies on the $font-size-base variable for sizing various elements, which could potentially expand to more areas in the future.

List of elements affected by size changes

dropdown font
button font
popover font
input-group font
forms font
reboot font

-------------- Sample SCSS --------------

Below is a snippet for your scss files; remember to define the $font-size-base BEFORE incorporating bootstrap into your main scss file. In this scenario, the app.scss file is being compiled.

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables -- where you specify the variables 
//              PRIOR to importing bootstrap, which utilizes its  
//              defaults if the variable is unspecified.
@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; // adjusts the font-size across bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

Answer 3

Answer №2

Within Bootstrap's _reboot.scss file, the base font-size is defined as follows:

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

REMINDER: It is advisable to avoid altering default values directly in framework files; instead, make modifications using custom CSS or JS files.

To adjust your font size to 14px, include this snippet in your own style.css (custom CSS file):

body {
    font-size: 0.875rem;
 }

Check out the provided fiddle for a demonstration.

If necessary, utilize !important to ensure your changes are prioritized and override any defaults.

In your custom.scss file, follow this structure:

$custom-variable: 0.875rem;

Then implement it like so:

@import "./src/scss/_modules/custom"; 
@import "./bower_components/bootstrap/scss/bootstrap";

body {
font-size: $custom-variable;
}

Answer 4

Within Bootstrap's _reboot.scss file, the base font-size is defined as follows:

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

REMINDER: It is advisable to avoid altering default values directly in framework files; instead, make modifications using custom CSS or JS files.

To adjust your font size to 14px, include this snippet in your own style.css (custom CSS file):

body {
    font-size: 0.875rem;
 }

Check out the provided fiddle for a demonstration.

If necessary, utilize !important to ensure your changes are prioritized and override any defaults.

In your custom.scss file, follow this structure:

$custom-variable: 0.875rem;

Then implement it like so:

@import "./src/scss/_modules/custom"; 
@import "./bower_components/bootstrap/scss/bootstrap";

body {
font-size: $custom-variable;
}

Answer 5

Answer №3

My recommendation would be to update the html {font-size: 16px} property directly instead of adjusting Bootstrap's $font-size-base, for a few reasons:

The font size specified in html is used directly in determining the final font size. There is no advantage in using an "intermediary" like body that is influenced by Bootstrap's $font-size-base.
Bootstrap's SCSS system calculates heading sizes based on $font-size-base, so any CSS rules affected by Bootstrap will also be impacted, including body (which is set to $font-size-base$ ).
On the other hand, browsers calculate font sizes in rem relative to html {font-size}, not from elements affected by $font-size-base (like body).
Specifying html {font-size} in units of pixels will impact any rem values, whether inside or outside of Bootstrap-affected elements, if that is your goal.

Alternatively, if you only want to adjust sizes for Bootstrap-affected elements, it is advisable to set the $font-size-base relative to html {font-size}, so CSS elements outside of Bootstrap are not affected. However, this scenario is more of an exception rather than the standard practice.

Note:
When setting $font-size-base or other Bootstrap variables, there is no need to edit the variables.scss file. Define the variables before importing

node_modules/bootstrap/scss/variables

and other Bootstrap files to ensure your values take precedence over the default values set in Bootstrap. This approach offers the advantage of avoiding extensive modifications to the entire variables.scss file.

Answer 6

My recommendation would be to update the html {font-size: 16px} property directly instead of adjusting Bootstrap's $font-size-base, for a few reasons:

The font size specified in html is used directly in determining the final font size. There is no advantage in using an "intermediary" like body that is influenced by Bootstrap's $font-size-base.
Bootstrap's SCSS system calculates heading sizes based on $font-size-base, so any CSS rules affected by Bootstrap will also be impacted, including body (which is set to $font-size-base$ ).
On the other hand, browsers calculate font sizes in rem relative to html {font-size}, not from elements affected by $font-size-base (like body).
Specifying html {font-size} in units of pixels will impact any rem values, whether inside or outside of Bootstrap-affected elements, if that is your goal.

Alternatively, if you only want to adjust sizes for Bootstrap-affected elements, it is advisable to set the $font-size-base relative to html {font-size}, so CSS elements outside of Bootstrap are not affected. However, this scenario is more of an exception rather than the standard practice.

Note:
When setting $font-size-base or other Bootstrap variables, there is no need to edit the variables.scss file. Define the variables before importing

node_modules/bootstrap/scss/variables

and other Bootstrap files to ensure your values take precedence over the default values set in Bootstrap. This approach offers the advantage of avoiding extensive modifications to the entire variables.scss file.

A guide to adjusting font sizes using Sass in Bootstrap 4

Answer №1

Warning regarding sole CSS overrides

-------------- Sample SCSS --------------

Answer №2

Answer №3

Similar questions

Create a personalized card featuring a captivating backdrop image

Only import Bootstrap into a single component

What is the method to display all items in a Vuetify Data Table rather than limiting it to 10 rows?

Enhance Animation Fluidity with HTML/CSS

the eventListener is not functioning as expected when used with the 'else' keyword

I need help figuring out how to get a horizontal scrollbar positioned at the top of a div to function properly once the content has been loaded using ajax

Using CSS to Identify When an Element is Being Grabbed, Dragged, or Moved

Temporary code implemented for IE8 is causing the dropdown login field to lose focus

Adjusting the width of Bootstrap 4 form validation messages for improved layout

Designing with Bootstrap 4 involves incorporating a button that uses the data-toggle attribute set to "collapse" along with an href anchor linked to

Fluid background images frame the header on either side, with a void of background in the center

A guide on compiling Sass without using gulp and Laravel Elixir [SOLUTION]

If the picture is aligned to the side, shift the text below it

The navigation elements in the Flexbox are behaving strangely as they overflow in an unexpected way

Bootstrap 3 offset doesn't respond to dimensions

What is the method to set an element's height equivalent to the height of the entire screen?

Angular: Creating a Sliding Menu with a Hamburger Icon

Best approach for adding an image to an HTML help button: which semantic option is most effective?

`CSS3 animations utilizing keyframes and transformation`

Ensure that columns are neatly arranged horizontally when they do not all fit in one row