Take the 2-minute tour ×

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!

share|improve this question
tabs are coming up at 22px for me on your page, is this issue resolved? –  Andres Ilich May 29 '12 at 22:33
@AndresIlich It is resolved. I just can't accept my own answer yet. –  Mark Rummel May 30 '12 at 23:51

3 Answers 3

up vote 2 down vote accepted

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">
share|improve this answer

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

share|improve this answer

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.

share|improve this answer

Your Answer


