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

User · Answer

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

User · Answer

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    lt p class  h4  gt    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

User · Answer

Add  importent in your css        font-size  16px  importent     line-height  2

User · Answer

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

User · Answer

In v4 change the SASS variable    font-size-base  1rem  default

User · Answer

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

User · Answer

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

[css] How to change Bootstrap's global default font size?

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to font-size