title: How to change the font size of a class to make it responsive using Bootstrap4 with sass?
body: <p>So, i'm working on a project using Bootstrap 4 sass and i want to make the font-size of the h3 to be responsive.</p>
  
  <p>When i go to the _type.scss, the h3 property looks like this:</p>
  
  <pre><code>h3, .h3 { font-size: $h3-font-size; }
  </code></pre>
  
  <p>it's calling the variable $h3-font-size from _variables.scss that looks like this:
      $h3-font-size:                $font-size-base * 1.75 !default;</p>
  
  <p>the $font-size-base variable looks like this:</p>
  
  <pre><code>$font-size-base:              1rem !default;
  </code></pre>
  
  <p>So, this far i know that the font-size of the h3 class is 1.75rem, what i want is that font-size to be 1.5rem from xs to md, and to be 1.75rem from md to lg.</p>
  
  <p>i went to the Bootstrap 4 Documentation for typography and it says this: </p>
  
  <p>Responsive typography refers to scaling text and components by simply adjusting the root element’s font-size within a series of media queries. Bootstrap doesn’t do this for you, but it’s fairly easy to add if you need it.</p>
  
  <p>Here’s an example of it in practice. Choose whatever font-sizes and media queries you wish.</p>
  
  <pre><code>html {
    font-size: 1rem;
  }
  
  @include media-breakpoint-up(sm) {
    html {
      font-size: 1.2rem;
    }
  }
  
  @include media-breakpoint-up(md) {
    html {
      font-size: 1.4rem;
    }
  }
  
  @include media-breakpoint-up(lg) {
    html {
      font-size: 1.6rem;
    }
  }
  </code></pre>
  
  <p>how do i include that in the _type.scss for the h3 to be responsive the way i want it to be? do i have to use the calc() function of css3? if i have to do that, how do i achieve it?</p>