Twitter Bootstrap Question posted in

Does twitter bootstrap have any font-size utility classes?

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.

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search