How to Change the Bootstrap Text Size and Make the Font Size Responsive

  • Updated on
  • read
  • Add to Flipboard Magazine.

 

Do you want to adjust the default font sizes in Bootstrap 4? You can either adjust the Sass variables or write new CSS styles to override the default values. In this tutorial, I will provide the default font size values and show you how to change the values based on the Bootstrap 4 breakpoints.

What are the default Bootstrap 4 text sizes?

  • Display 1 (6rem = 90px)
  • Display 2 (5.5rem = 82.5px)
  • Display 3 (4.5rem = 67.5px)
  • Display 4 (3.5rem = 52.5px)
  • h1 (2.5rem = 40px)
  • h2 (2rem = 32px)
  • h3 (1.75rem = 28px)
  • h4 (1.5rem = 24px)
  • h5 (1.25rem = 20px)
  • h6 (1rem = 16px)
  • p (1rem = 16px)

How do you make the Bootstrap 4 text sizes responsive?

Since Bootstrap is a “Mobile First” CSS framework you need to write your styles mobile up.

So, your smallest bold font size will be written outside of a media query and then you will make adjustments as the viewport gets larger. There isn’t a class already setup in Bootstrap for this so you have to write custom CSS rules.

Option 1: Media Queries

CodePen Demo

 

Option 2: Responsive to viewport width

Another approach would be to calculate the font size based on the viewport height and width. As the viewport gets smaller, the font-size will get smaller. This is not the default behavior in Bootstrap 4 because font sizes are relative to the body font size of 16px. So you will need to use a custom class .text-responsive to add this new functionality.

CodePen Demo

Summary

I hope this helps you in your projects. Leave a comment if you have any additional questions.


Written by: Jacob Lett
Category: Common Questions
Tags:

Leave a comment

Related Posts

Blog Home

Categories

Topics