ABor ABor - 2 months ago 13
CSS Question

Bootstrap Button Full Width for Smaller Screen Sizes

I want my bootstrap buttons to take up full screen width(well, almost) for smaller screens.

btn-block
does make the button extend, but for all types of screen.

Can this
btn-block
be customized using CSS (for example using
@media
) so that it is activated only for smaller screens? Or is there any other way of doing it?

My HTML button code lines are mentioned below:

<button type="submit" class="btn btn-lg btn-success">
Submit
</button>
<button type="reset" class="btn btn-lg btn-warning">
Reset
</button>


Thanks

AB

Answer

Unfortunately there aren't a 'class' of bootstrap to apply this 'effect'. The only thing you can do, is using @media on CSS. You can use it:

@media (max-width: 768px) {
    .btn, .btn-group {
        width:100%;
    }
}

You can apply one of the 'col' classes on the button, but the 'box' of the button will not follow the size of it content.

I hope it can help you. :)