How to change Bootstrap's global default font size?

Question

Bootstrap's global default font-size is 14px, with a line-height of 1.428. How can I change its default global settings?

Will I have to change bootstrap.min.css in all the multiple entries?

Solution 1

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.

Solution 2

Bootstrap uses the variable:

$font-size-base: 1rem; // Assumes the browser default, typically 16px

I don't recommend mucking with this, but you can. Best practice is to override the browser default base font size with:

html {
  font-size: 14px;
}

Bootstrap will then take that value and use it via rems to set values for all kinds of things.

Solution 3

You can add a style.css, import this file after the bootstrap.css to override this code.

For example:

/* bootstrap.css */
* {
   font-size: 14px;
   line-height: 1.428;
}

/* style.css */
* {
   font-size: 16px;
   line-height: 2;
}

Don't change bootstrap.css directly for better maintenance of code.

Solution 4

The recommended way to do this from the current v4 docs is:

$font-size-base: 0.8rem;
$line-height-base: 1;

Be sure to define the variables above the bootstrap css include and they will override the bootstrap.

No need for anything else and this is the cleanest way

It's described quite clearly in the docs https://getbootstrap.com/docs/4.1/content/typography/#global-settings

Solution 5

In v4 change the SASS variable:

$font-size-base: 1rem !default;

View more solutions

Comments

[ctb]

This is a bad approach. There are a ton of other styles in bootstrap.css that are based on font-size and line-height, e.g. the size of headings. If you just update font-size, nothing else would change. That's why they have a configuration tool. If you update the font-size and line-height in their tool (or in a less config file) all the styles that are based on them will be updated too. Also, when you use their tool, bootstrap gives you a file that you can import into their tool later if you're upgrading bootstrap or decide you want to make changes. Jake's answer is best.

[Wouter Lievens]

How do you combine this customize feature with the npm dependency approach?

[Jake Wilson]

@WouterLievens you can certainly edit the SASS/LESS files and compile them manually if you install Bootstrap via npm, bower, etc. However I would definitely avoid installing anything via a package manager like npm that you expect yourself to customize at all. It's much better to install them manually into your project and commit them to your repo since you are going to customize them. See this question: stackoverflow.com/questions/30058758/…

[danblaker]

The h4 class applies more than just a font-size, so this change would have unintended consequences.

[CXJ]

This is in Bootstrap V4 only, because of the change from V3 px measurements to V4 rem measurements, correct?

[CloudMagick]

@CXJ you are correct, v3 sets $font-size-base as 14px. If you are tied to v3, I would recommend changing that value to 1rem, and then setting html {font-size: 14px} as in the example above.

[Martin Costello]

The html option below is better, otherwise tags within other element (e.g. a p with a lead class) won't have the same font size, giving an inconsistent appearance.

[Bruce Pierson]

This is the best way. Bootstrap 4 will magically size like v3 once you change this to 14px. Now to do something about that absurdly bright primary blue color...

[Jay Jay Jay]

This is specifically for bootstrap 3

[Jay Jay Jay]

THIS IS THE RIGHT ANSWER. Thank you from the bottom of my heart

[Mattia Rasulo]

This doesn't work in bootstrap 5 though, at least on me!

[CloudMagick]

@MattiaRasulo I just tried an upgrade of my app to bs5 and my font setting worked properly. did you add html {font-size: 14px;} in a stylesheet that is being applied to the page? For example, I have global stylesheet in my app that I try to keep very simple, and in that stylesheet, right at the top, I define the html font size as above. It's possible, of course, that something else downstream is overriding the font size... in this case, the web inspector is your friend. Also, try setting something crazy like, html {font-size: 2px !important;} just to see that it works.

[CloudMagick]

@MattiaRasulo Are you using a pre-compiled version of bootstrap in which there are just css files, and no sass files? In that case, it will be an uphill battle to do overrides, and I don't recommend that path. The accepted answer on this thread mentioned using Bootstrap's customize tool for downloading compiled css, but I believe that will limit your to version 3.

[Mattia Rasulo]

No I'm on version 5 and to @CloudMagick I do have it set that way.. it's a bit weird.. that's why I usually just don't use front-end frameworks..