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)

Advertise Here

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


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


Advertise Here

Written by: Jacob Lett - Jacob started BootstrapCreative to help others learn web design and development. He has built websites for 10+ years for companies and as a freelancer. He enjoys learning and encouraging others to improve their skills.
Category: Common Questions

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Bootstrap 4 books - learn responsive web design for beginners

Want a Bootstrap Reference Book?

Learn More

Advertise Here