Why did bootstrap 3 reduce all my fonts?

Question

I am new to bootstrap and I added bootstrap 3 to my project and it reduced all font sizes, I never had any font size specified in these classes. I thought bootstrap 3 has a default size of 14 .. is there anything else I need to do?

thanks

Answer 1

You can configure / override anything - if, for example, you upload YOUR css file AFTER the boot file, your settings will override it. Whatever you dream of:

p { font-size 18px; } 

etc.

I highly recommend digging into the source code: https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

 html { font-size: 62.5%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.428571429; color: #333333; background-color: #ffffff; } 

UPDATE: To clarify “No,” you do not need to do anything. There seems to be another problem. The associated source code has changed since the original date of the response ... as of February 2015 is as follows:

 html { font-size: 10px; } body { font-size: 14px; } 

Assuming we set up our project correctly ( bower install bootstrap pretty simple) ... trying to echo text outside the body should result in 10px text, inside the body should be 14px.

If you do not see the 14-point text inside the body, then something else may come on it. Then I will examine Chrome (for example) to confirm where the font size came from.

I would like to add that, in my opinion, it is useful to understand how these values ​​that we see in this / dist / css file are obtained from smaller variables ... the default values ​​should work out of the box, but you have a simple control above everything, including the size of the main text: see http://getbootstrap.com/css/#less-variables .

Answer 2

This seems to be happening at least with version 3.3.6 because of this block on line 1097:

 html { font-size: 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 

You can restore the font size by adding it to the stylesheet:

 html { font-size: 100%; }