Suggestion: Make button groups responsive :)

[pkdesigns]

Hi guys,

Already quickly discussed that with Dom.

The button groups aren't really responsive at the moment. Is there any chance you could / we could implement something like the following, please see screen shots attached.

In words: Stack the button group on mobile.

FYI: I've designed this already and have given it to my devs. he's gonna implement it for my project but it would be great if we could implement this 'officially'.

Thanks :)!

[dominikwilkowski]

:+1: I love this. @justinspencer what do you think? @KateMacdonald ?

[kumarb4u2]

I was able to fix it with below media query for mobile:

 @media (max-width: @screen-xs-max) {
    .btn-group-justified > .btn, .btn-group-justified > .btn-group {
        float: none;
        display: table;
        width: 100%;
    }
    .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: 6px;
    }
    .btn-group > .btn:last-child:not(:first-child):not(.dropdown-toggle) {
      border-top-right-radius: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 6px;
    }
    .btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
      margin-left: 0px;
    }
  }

[dominikwilkowski]

Thanks @kumarb4u2 I'll look into that and if it all runs you can make a pull request if you want and we merge you

[dominikwilkowski]

I've investigate this the last two weeks and the only way I see this work for more flexibility is to give the button-groups the grid as a formating option.

So something like:

<div class="btn-group btn-group-responsive row">

    <label class="btn-group-item col-sm-4">
        <input class="btn-group-input" type="radio" name="options-responsive">
        <span class="btn-group-text btn btn-primary">Left</span>
    </label>

    <label class="btn-group-item col-sm-5">
        <input class="btn-group-input" type="radio" name="options-responsive">
        <span class="btn-group-text btn btn-primary">Middle</span>
    </label>

    <label class="btn-group-item col-sm-3">
        <input class="btn-group-input" type="radio" name="options-responsive">
        <span class="btn-group-text btn btn-primary">Right</span>
    </label>

</div>

That way you can decide the breakpoint yourself with the grid you are already familiar with. This however will mean we have to recreate the media queries for each col- class to capture when things reflow into the next line and need to fix the border radius and width. This is sorta a lot of code to be added to this already big module. Not sure if it fits right now.

Though a very good idea I must find a better more performant way here.

TL;DR Still working on it :)

[justinspencer]

This is great as long as it's a specific responsive class. We don't necessarily want all instances of button groups to behave like this when we hit the xs breakpoint.