13

Is there a way in Bootstrap 4 to add the class 'btn-sm' (small button) when in the media-breakpoint-xs?

I'd like to the buttons to be default size except in xs screens where I'd like them to automatically switch to btn-sm.

Nik
  • 7,086
  • 6
  • 36
  • 52
  • 2
    Add the class to the element and apply styles within a media query. – Wes Foster Jun 29 '17 at 14:33
  • The class is bootstrap default, by adding the class to the element in the code, the button would get those styles regardless of the current breakpoint. – N. M. Jun 29 '17 at 14:43
  • 1
    Possible duplicate of [How to create responsive buttons in bootstrap3?](https://stackoverflow.com/questions/21709917/how-to-create-responsive-buttons-in-bootstrap3) – N. M. Jun 29 '17 at 14:45
  • @user1394625 That's why the flag states `Possible`. Don't assume I downvoted your question only because I flagged it as a possible duplicate. – N. M. Jun 30 '17 at 06:30

3 Answers3

19

Assign .btn the .btn-sm sizing using the media-breakpoint-between mixin...

/* change all .btn to .btn-sm size on xs */
@include media-breakpoint-between(xs,sm){
  .btn {
      @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
  }
}

https://www.codeply.com/go/FoEUO7XCDU

Update - Bootstrap 4.1
This button-size mixin has changed slightly to: 
@include media-breakpoint-between(xs,sm){
  .btn {
      @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
  }
}
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 1
    thats exactly it! Thanks for taking the time to read the question – Nik Jun 29 '17 at 17:13
  • 1
    @Mark you can add it to any .scss file in you project but you may also have to import bootstrap-grid.scss and _buttons.scss so it knows what 'xs','sm','$btn-padding-y-sm' (and the other variables) mean. Such as: @ import "~bootstrap/scss/bootstrap-grid.scss"; @ import "~bootstrap/scss/mixins/_buttons.scss"; All this stuff may vary depending on how you set up your ng2 project – Nik Jul 20 '17 at 12:26
6

In Bootstrap 4 this can be achieved using the utility classes alone.

<a href="#" class="btn btn-primary d-flex justify-content-center d-md-table mx-auto">Book a demo</a>
soulglider
  • 161
  • 1
  • 4
1

If you want to make a button responsive, you need to make its text responsive.

You can use vw (Viewport Width) for font size:

@media (max-width: 576px) {
  .responsive-content {
    font-size: 6vw;
  }
}
<button type="button" class="responsive-content btn btn-primary">
  responsive button
</button>

Now you can resize the screen to see the effect.

shahab_malekzade
  • 152
  • 11