How to change Bootstrap's global default font size?
CssTwitter BootstrapTwitter Bootstrap-3Font SizeCss Problem Overview
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?
Css Solutions
Solution 1 - Css
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 2 - Css
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 3 - Css
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 - Css
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 - Css
In v4 change the SASS variable:
$font-size-base: 1rem !default;
Solution 6 - Css
As of Bootstrap 5 you can set the default font size by changing the $font-size-root variable.
$font-size-root: 16px;
Solution 7 - Css
I use Bootstrap via CDN (Content Delivery Network), so I solved it with this easy way. Change the global default font-size in the <html> tag.
Example for smaller font-size:
<html style="font-size:0.875em">
Simple change the em value.
With Bootstrap Version 5.2 the font size is 1rem:
> font-size-base: 1rem; // Assumes the browser default, typically 16px
0.875em = 14px, if default browser font size is 16px
1em = 16 px
1.125em = 18px, if default browser font size is 16px
Solution 8 - Css
I just solved this type of problem. I was trying to increase
font-size to h4 size. I do not want to use h4 tag. I added my css after bootstrap.css it didn't work. The easiest way is this: On the HTML doc, type
<p class="h4">
You do not need to add anything to your css sheet. It works fine Question is suppose I want a size between h4 and h5? Answer why? Is this the only way to please your viewers? I will prefer this method to tampering with standard docs like bootstrap.