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

/* 
Extra small devices (portrait phones, less than 544px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
h1 {font-size:1rem;} /*1rem = 16px*/
/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 544px) {  
  h1 {font-size:1.5rem;} /*1rem = 16px*/
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  h1 {font-size:2rem;} /*1rem = 16px*/
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  h1 {font-size:2.5rem;} /*1rem = 16px*/
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  h1 {font-size:3rem;} /*1rem = 16px*/    
}
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/
 
/* Set width to make card deck cards 100% width */
@media (min-width: 950px) and (max-width:1100px) { 
  h1 {font-size:2.75rem;color:red;} 
}

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.

.text-responsive {
  font-size: calc(100% + 1vw + 1vh);
}

CodePen Demo

Summary

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