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

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

 

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, a website designer & developer who creates HubSpot CMS themes and writes web design & marketing books to help marketers, designers, and web developers grow their businesses. This blog is my own personal journal and source to help others through some challenges I have faced.
Connect on LinkedIn


Category: Common Questions
Tags:

Related resources

  • HubSpot CMS vs WordPress: Feature Comparison and Review
  • 25+ Questions to Ask Before Redesigning Your Business Website
  • 5 Things A Business Should Consider Before a Website Redesign
  • How to Get a Responsive Website for Your Manufacturing Company
  • What Is a Good WordPress Alternative for Businesses?