css - Bootstrap 4 responsive button size

Question

Is there a way in Bootstrap 4 to add the class 'btn-sm' (small button) when in the media-breakpoint-xs?

I'd like to the buttons to be default size except in xs screens where I'd like them to automatically switch to btn-sm.

Answer 1

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

---

Update - Bootstrap 4.1
This button-size mixin has changed slightly to:

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