Bootstrap: Responsive .btn-block

[peiche]

I love the responsive float classes in v4, but I was wondering if a similar concept could be applied to the .btn-block class. Here is a demo page which, as an example, has paging buttons. Without the convenience of a .btn-[size]-block class, you end up duplicating markup. (I only made the smallest size for the sake of the example.)

http://codepen.io/peiche/pen/wzvEyJ

[cvrebert]

Duplicate of #13647.

[pvdlg]

The tricky part would be the vertical spacing between btn-{breakpoint}-block here:

.btn-block + .btn-block {
  margin-top: $btn-block-spacing-y;
}

I would force to create all the combination for the different responsive classes, for each breakpoints. A total of 125 selector to handle the spacing...if we have 5 breakpoints...

Unless we decide to get rid of it and rely on spacing utilities instead

[pvdlg]

For information this is what the scss would look like to handle the responsive btn-{breakpoint}-block and the spacing. Nasty...

@function breakpoint-infix-up($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-max($name, $breakpoints) == null, "", "-#{$name}");
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    $infix: breakpoint-infix-up($breakpoint, $grid-breakpoints);

    .btn#{$infix}-block {
      display: block;
      width: 100%;
      @each $breakpoint2 in map-keys($grid-breakpoints) {
        $infix2: breakpoint-infix-up($breakpoint2, $grid-breakpoints);

        + .btn#{$infix2}-block {
          margin-top: $btn-block-spacing-y;
        }

        .btn#{$infix2}-block + & {
          margin-top: $btn-block-spacing-y;
        }
      }
    }
  }
}

[pvdlg]

I went ahead and made the PR #21720.
It generates the responsive btn-*-block but not the vertical spacing.
The docs now mention to use the spacing utilities instead.

[guylepage3]

Definitely would like to see responsive btn-reset or something of the sort.

[beckbailey]

Just add white-space: normal; to your .btn class.

[tomsommer]

It's a shame #21720 was closed. This feature really makes sense for buttons, especially since there is responsive utility for most other things.

It should be possible to find a non-breaking middle-ground based on #21720?

[MartijnCuppens]

We can indeed achieve this with utility classes these days, like @pvdlg mentioned.