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

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>

Answer 2

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.