How to make text responsive in Bootstrap

You can make text responsive in Bootstrap by using vw units or media queries.

The text size can be set with a vw unit, which means the "viewport width".

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Resize the browser window to see how the font size scales.

        
            
          <h1 style="font-size: 8vw;">I am responsive</h1>
        
        
    

You can also use media queries to change the font size of an element on specific screen sizes:

        
            
          <h1 class="responsive-font-example">I am responsive</h1>
        
        
    

        
            
          /* If the screen size is 1200px wide or more, set the font-size to 80px */
          @media (min-width: 1200px) {
            .responsive-font-example {
              font-size: 80px;
            }
          }
          /* If the screen size is smaller than 1200px, set the font-size to 80px */
          @media (max-width: 1199.98px) {
            .responsive-font-example {
              font-size: 30px;
            }
          }