Mr Pablo Mr Pablo - 2 months ago 8
CSS Question

Change buttons to "btn-block" on mobile screen size

Using Bootstrap 3, is there a way to make buttons use the btn-block class when on a "xs" screen size?

Currently I have a form that has some rows containing 3 dropdowns and two buttons, which looks fine on large and medium screens.

When the form changes on small screens, and the form controls are forced to flow vertically, the buttons stay the same size and it looks daft, with them pushed to the left side of the screen.

Ideally I'd like to be able to have them as block buttons when on the smaller screen sizes, so they take up the full width (of the form, as do the form controls) and make it look a bit nicer.


Add your custom class to the button, and use media queries to set the width to 100% on devices up to your breakpoint. SO ie

<button class"bootstrap classes custom-class></button>   

and in CSS

@media all and (max-width:480px) {
   .custom-class { width: 100%; display:block; }

You can also control what is happening above this breakpoint by setting up media queries on different breakpoints.