Does twitter bootstrap have any font-size utility classes?

Question

I can't find any utility classes for changing the font size in Bootstrap. There are utility classes for margins and padding, etc. There are display classes for headings and there's a lead class for paragraphs, but is there any way to make a specific piece of text larger and smaller with a utility class in html instead of having to add some css?

I find it's easier to mock up designs quickly using as many utility classes as possible before abstracting common patterns into custom css.

I've combed through the Bootstrap Text Utilities docs and the Typography docs, but can't find anything. Am I missing something or does this just not exist in Bootstrap? This seems like something Bootstrap would offer offer—the ability to change the text size by adding a class name like t-1, t-2, t-3, t-4, etc.

I'm not talking about responsive typography, just changing the default font size with a utility class instead of writing css.

Honeysucker

You can find what you are looking for in bootstrap documentation, typography – Kop

@Marios The question already has a link to that. Also the format you're looking for is [here](url). – Unilingual

@MariosNikolaou That's why linked to several different places in the Bootstrap documentation. I combed through the docs and couldn't find anything, that's why I'm asking the question. I wanted to make sure I'm not missing something. – Honeysucker

waiting for font size utility classes but now not exists ! – Professorship

@LeeMcAlilly if it's not in documentation then it does not exists. – Kop

@MariosNikolaou Just thought I'd ask as there are some areas of Bootstrap that are very useful but a little obscure in the docs. For instance, the available variables that you can override are in the source code (github.com/twbs/bootstrap-rubygem/blob/master/assets/…). Also, as I was googling this question I didn't find any clear answers so I figured if I asked it on StackOverflow it might help save someone else some time down the road. Appreciate you taking the time to respond though! – Honeysucker

Answer 1

There is no classes to change the font size but you can manage font size with strong and small tag but you cant change paragraph font size. You need to create custom CSS to do that.

Wellinformed

Appreciate it. Just thought I might have missed something. – Honeysucker

As a rule, do not use heading tags just for the sake of making the text bigger. They have an important semantic, accessibility and SEO role, not a styling one. – Eighteenmo

Answer 2

jitu thakur is correct in their answer to this question: there are currently no Bootstrap utilities that adjust font-size for you. However, it's easy enough to create your own custom utility class in Sass:

$util-font-sizes: 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200;

@each $util-font-size in $util-font-sizes {
  .font-size-#{$util-font-size} {
    font-size: $util-font-size * 1% !important;
  }
}

This will create 20 font-size util classes, from .font-size-10 to .font-size-200, that look like this:

.font-size-10 {
    font-size: 10% !important;
}

.font-size-20 {
    font-size: 20% !important;
}

/* ...etc... */

You can adjust the values in $util-font-sizes, or the class names or the units to fit your needs.

Unnecessary

Answer 3

The comments here seem to have overlooked the h1-h6 tags and corresponding .h1, .h2, .h3, .h4, .h5 and .h6 classes, as well as the .display1, .display2, .display3 and .display4 classes for extra large font size. Oh, there's also the small tag and .small class!

Raving

The header classes have some other side-effects, but in my case they were beneficial. – Watercool

.displayX not present in bootstrap 3 – Momus