How do I implement responsive typography with Bootstrap 4?

Question

I\'m building a responsive web app with Bootstrap 4. I want the font size of all text to be reduced on mobile devices compared to desktop, so I added the following to my bas

Answer 1

Here is an alternative approach with loop

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

$font-sizes: (
    html: ( xs: 1rem, sm: 1.2rem, md: 1.3rem),
  );

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $name, $values in $font-sizes {
      @each $n, $value in $values {
        @if($infix == "-#{$n}" or ($infix == "" and $n == 'xs')) {
          #{$name} { font-size: $value; }
        }
      }
    }
  }
}