Change bootstrap button size depending on screen width

user_6224975 0
Viewed 800

I need to change both the size (e.g btn-xs to btn-lg) and the number of columns a bootstrap button spans, based on the width of the screen. The last part is not a problem, but how do I do the first part? Is there a way to inherit class and then do a media-query e.g


@media only screen and (orientation: landscape) and (max-width:1024px) {

.my-button{
.btn-lg
    }    

}
bootstrap-4 css html
3 Answers

Hey u could leverage selective display from bootstrap like below:

<div class="d-block d-sm-none">
    <div>
        <button class="btn-xs">Button</button>
    </div>
</div>

The above one will only be visible on xs. Refer https://getbootstrap.com/docs/4.0/utilities/display/ for more combinations

user_97335460

You can drop .btn-lg and .btn-sm. Just put a padding like p-2 and media query the font size based on screen size.

user_138035490

Since button size resizes with text's font-size, why not use vh/vw for your button's text's font-size?

user_153726680
Related