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

  • read


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.

Written by: Jacob Lett - Jacob is a digital marketing and web design consultant who helps businesses grow their revenue. Unlike his competitors, he focuses on small and consistent website design changes to increase results. He recently created the Industrial HubSpot Theme to help manufacturers quickly build their website on the HubSpot platform.
Category: Common Questions