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;
  }
}