3

I'm trying to change the font-size of the Twitter Bootstrap tabs on a webpage. Seems like a simple thing, but for some reason it is not working.

Everything works in my JSfiddle example: http://jsfiddle.net/Ww5Cw/.

However, it is not working properly on the actual webpage: http://chooserealtoday.com/new.html (scroll down a little bit - only tabs on the page).

I've changed the font-size to 22px via Google Chrome Inspector (.nav-tabs li a) and it works, but when I add .nav-tabs li a {font-size:22px;} to my styles.css, it doesn't seem to work. I've also tried .nav-tabs > li > a.

Any thoughts on why this is? Thanks!

Mark Rummel
  • 2,920
  • 10
  • 37
  • 52

4 Answers4

6

I tried a lot of things, even using jQuery to change the font-size, but nothing worked, because as David said, the font is hardcoded into Bootstrap.

I eventually added one line of CSS after bootstrap-responsive.css and that got it working.

<!-- Le styles -->
<link href="assets/bootstrap2-2/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">
<link href="assets/bootstrap2-2/css/bootstrap-responsive.css" rel="stylesheet">
<style type="text/css">
  .nav-tabs li a {font-size:22px;}
</style>
Mark Rummel
  • 2,920
  • 10
  • 37
  • 52
1

The font is hardcoded into Bootstrap unfortunately. There are a couple threads that you can take a look at where people have asked similar questions and received some instruction on how to work around.

navbar color in Twitter Bootstrap

Change bootstrap webpage font size when

Community
  • 1
  • 1
David
  • 2,365
  • 8
  • 34
  • 59
0

May be your style.css connects before the other and therefore the property is overwritten. Try set the order of connection css files.

Or try to add font-size property to ul or li.

Xella
  • 1,283
  • 10
  • 10
0

use the directive (!important) for example: font-size: smaller !important;

zaher
  • 15
  • 1
  • 5