CODEWITHSUNDEEP
twitter-bootstrap-3
user2206329
user2206329

Reputation: 2842

Why did bootstrap 3 make all my fonts smaller?

I am new to bootstrap, and I added bootstrap 3 into my project and it shrunk all the font sizes, I never had any font size specified in these classes. I thought bootstrap 3 had the default size to 14.. is there something else I need to do?

Thanks

Upvotes: 12

Views: 8728

Answers (2)

Andrew Cheong
Andrew Cheong

Reputation: 30283

It appears to be happening, at least as of version 3.3.6, due to this block on line 1097:

html {
  font-size: 10px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

You can restore your font-size by adding this to your stylesheet:

html
{
    font-size: 100%;
}

Upvotes: 18

Ryan
Ryan

Reputation: 6249

You can customize/override anything - if, for example, you load YOUR css file AFTER the bootstrap file, then your settings will override it. Whatever you can dream:

p {
  font-size 18px;
}

and so on...

I strongly 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 shouldn't have to do anything else. It sounds like there is another problem. The linked source code has changed since the original answer date... as of Feb 2015, it looks like this:

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

Assuming we've set our project up correctly, (bower install bootstrap is pretty easy)... attempting to echo text outside of the body should result in 10px text, inside body should be 14px.

If you don't see 14 point text inside the body, then something else might be stepping on it. I'd next inspect in in Chrome (for example) to confirm where the font-size was coming from.

I'd like to add that I think it's helpful to understand how these values we see in this /dist/css file are derived from less variables... the defaults should work out of the box, but you have easy control over everything, including the body text size: see http://getbootstrap.com/css/#less-variables.

Upvotes: -4

Related Questions