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

Question

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.

Solution 1

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.

Solution 2

For Bootstrap 4.3 you can use built in classes. Mobile: Display Block Desktop: Display Inline block

<a href="#button1" class="btn d-block d-md-inline-block">Button 1</a>
<a href="#button1" class="btn d-block d-md-inline-block">Button 2</a>

Solution 3

Adding the CSS shown below to your Bootstrap 3 application enables support for

.btn-xs-block
.btn-sm-block
.btn-md-block
.btn-lg-block

classes that provide variations of btn-block which are responsive and specific to the size of the viewport.

If you have multiple buttons side-by-side and they don't fit on small screens, thus breaking and wrapping to another line, just add btn-xs-block or btn-sm-block (or in rare cases one of the other classes) to your buttons and they will be full-width and stacked on small screens:

<button class="btn btn-default btn-xs-block" type="button">Button 1</button>
<button class="btn btn-default btn-xs-block" type="button">Button 2</button>

CSS for Bootstrap 3:

@media (max-width: 767px) {
    .btn-xs-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-xs-block,
    input[type="reset"].btn-xs-block,
    input[type="button"].btn-xs-block {
        width: 100%;
    }
    .btn-block + .btn-xs-block,
    .btn-xs-block + .btn-block,
    .btn-xs-block + .btn-xs-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .btn-sm-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-sm-block,
    input[type="reset"].btn-sm-block,
    input[type="button"].btn-sm-block {
        width: 100%;
    }
    .btn-block + .btn-sm-block,
    .btn-sm-block + .btn-block,
    .btn-sm-block + .btn-sm-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .btn-md-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-md-block,
    input[type="reset"].btn-md-block,
    input[type="button"].btn-md-block {
        width: 100%;
    }
    .btn-block + .btn-md-block,
    .btn-md-block + .btn-block,
    .btn-md-block + .btn-md-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 1200px) {
    .btn-lg-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-lg-block,
    input[type="reset"].btn-lg-block,
    input[type="button"].btn-lg-block {
        width: 100%;
    }
    .btn-block + .btn-lg-block,
    .btn-lg-block + .btn-block,
    .btn-lg-block + .btn-lg-block {
        margin-top: 0.5rem;
    }
}

Solution 4

For Bootstrap 4, I use this:

# HTML
<input type="submit" class="btn btn-primary btn-block-xs-only">

# SCSS
@include media-breakpoint-only(xs) {
  .btn-block-xs-only {
    display: block;
    width: 100%;
  }
}

See here for reference - http://v4-alpha.getbootstrap.com/layout/overview/

Solution 5

You can also put the button in a grid, so you don't have to write any additional css.

    <div class="row">
        <div class="col-12 col-md-2">
            <button type="submit" id="submit" class="btn btn-primary btn-block">submit</button>
        </div>

        <div class="col-0 col-md-10"></div>
    </div>

View more solutions

Comments

[Adrian Preuss]

Better is, you're using @media (max-width: breakpoint-min(sm)) because, it's backward compat for smaller sizes ;)

[Shreyansh Panchal]

This is the correct answer if you're using bootstrap 4.3. However this only works on anchor tag & not if you're working with button.

[e11world]

Very helpful. Thanks!

[shiny]

worked perfectly with a Link and button styling!