Does twitter bootstrap have any font-size utility classes?

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!


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.


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.