Resize button on different screens using boostrap classes

Question

Hello how can I resize my large button (btn-lg) and display it as small on small devices?

<div class="col-4 col-md-2 col-lg-1  mt-md-5">
<a href="{{ url_for('remove_favourite', trail_id=fav._id ) }}" class="btn btn-lg btn-delete-fav 
    text-shadow btn-danger">
          Delete</a>
            </div> 

Answer 1

You can use below custom media css for that.

@media (max-width: 768px) {
  .btn.btn-lg {
    padding: .25rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
  }
}