Bootstrap 4 responsive button size

If you want to make a button responsive, you need to make its text responsive.

You can use vw (Viewport Width) for font size:

@media (max-width: 576px) {
  .responsive-content {
    font-size: 6vw;
  }
}

<button type="button" class="responsive-content btn btn-primary">
  responsive button
</button>

Now you can resize the screen to see the effect.

Assign .btn the .btn-sm sizing using the media-breakpoint-between mixin...

/* change all .btn to .btn-sm size on xs */
@include media-breakpoint-between(xs,sm){
  .btn {
      @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
  }
}

https://www.codeply.com/go/FoEUO7XCDU

@include media-breakpoint-between(xs,sm){
  .btn {
      @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
  }
}

In Bootstrap 4 this can be achieved using the utility classes alone.

<a href="#" class="btn btn-primary d-flex justify-content-center d-md-table mx-auto">Book a demo</a>