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.
3 Answers
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>
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.
Related