43

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.

2
  • 2
    try use @media or add another buttons with btn-block which would be visible only for xs displays
    – demo
    Jan 28, 2015 at 11:53
  • Complete drop-in solution for Bootstrap 3 with custom classes here: stackoverflow.com/a/41732228/89818
    – caw
    Jan 19, 2017 at 1:24

10 Answers 10

42

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.

0
31

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>
2
  • 5
    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. Mar 25, 2020 at 7:49
  • 1
    worked perfectly with a Link and button styling!
    – shiny
    Feb 18, 2021 at 6:39
27

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;
    }
}
0
20

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/

1
  • 1
    Better is, you're using @media (max-width: breakpoint-min(sm)) because, it's backward compat for smaller sizes ;) Jul 19, 2018 at 22:38
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>
4

If you want to use just "native" bootstrap classes you could do this:

<input type="submit" 
    class="btn btn-primary 
        visible-xs-block 
        visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
0
3

Bootstrap 4 - Blocks Mobile Screen Size buttons .btn-*-block

/* Blocks Mobile Screen Size buttons
   .btn-xs-block
   .btn-sm-block
   .btn-md-block
   .btn-lg-block
*/

@media (max-width: 767px) {
    .btn-xs-block {
        display: flex;
        width: 100%;
    }
    /*
        Extra config:
        .btn-xs-block .btn {
            flex-grow: 1;
        }
    */
    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: flex;
        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: flex;
        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: flex;
        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;
    }
}
1
  • I love this solution, but somehow you lose the text-center that is built into Bootstrap 4's btn-block class, and I've tried applying it to no avail.
    – PKD
    Feb 14 at 0:06
3

For Bootstrap 4.4, I wrote the following (SCSS) because it's consistent with other responsive utilities, like text-*-center:

// Generate series of `.btn-*-inline-block` (plus `.btn-inline-block` itself)
@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

  .btn#{$infix}-inline-block {
    @include media-breakpoint-up($breakpoint) {
      display: inline-block;
      width: auto;
    }
  }
}

Example usage (a button which expands to full width util lg breakpoint):

<a href="#" class="btn btn-primary btn-block btn-lg-inline-block">Button</a>
2

Bootstrap Update - 5.1

You can solve this problem like this;

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>
0

This is the solution I came up with for Bootstrap 4 as I wanted to keep the button centered except for when on a mobile resolution where I wanted it to fill the container.

This involves creating a grid column either side which is hidden at the smallest size d-none but visible on small and higher d-sm-block then I set a wider size for large and above so the button remains a sensible width at all sizes:

<div class="row">
   <div class="col-lg-5 col-md d-none d-sm-block">
   </div>
   <div class="col-md text-center">
      <button type="submit" class="btn btn-primary btn-block">Register</button>
   </div>
   <div class="col-lg-5 col-md d-none d-sm-block">
   </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.