Make button group that flows vertically to horizontally cleanly

Question

I've used a normal bootstrap 3 button group in a size one column, e.g.

<div class="col-sm-1">
  <div class="btn-group">
    <button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
  </div>
</div>

This is vertical when there is space, but when it drops to a new row it becomes horizontal. My only problem is that when vertical it looks a bit odd. I've tried playing with the CSS to no avail, does anyone have advice? I don't mind making it fully square so horizontal/vertical are similar, but my efforts to do this have not worked

improper horizontal alignment and corners

score 2 · Accepted Answer · answered Sep 29 '14 at 03:23

If fully square buttons are ok to you, something like this should work:

CSS:

#group button:first-child, #group button:last-child {
    border-radius: 0;
}
#group button:first-child {
    margin-left: -1px;
}

HTML:

<div class="col-sm-1">
  <div id="group" class="btn-group">
    <button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
  </div>
</div>

Works perfectly, thanks. Not sure why I couldn't get that one to work when I tried, but happy to have it solved :-) — Hamy, Sep 29 '14 at 03:27

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

I had created something like this before.

DEMO: http://jsbin.com/vahaq/1/

Assumes vertical on 768px and up, which is what it is, so I've just modified the styles below that min-width.

HTML (same as yours but with btn-group-vertical and btn-group-custom)

<div class="col-sm-1">
  <div class="btn-group-vertical btn-group-custom">
    <button class="btn btn-default"><span class="glyphicon glyphicon-home"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-volume-down"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-volume-up"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-off"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
    <button class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
  </div>
</div>

This is more elaborate as it kicks in and kicks off for really good responsiveness:

@media (max-width:299px) { 
    .btn-group-vertical.btn-group-custom > .btn {
        float: left;
        width: auto;
        width: 25%;
        min-height: 50px;
        min-width: 50px;
        margin-top: -1px!important;
    }
    .btn-group-vertical.btn-group-custom .btn + .btn {
        margin-left: -1px;
        margin-top: 0;
    }
    .btn-group-vertical.btn-group-custom > .btn:first-child {
        margin-top: 0;
        margin-left: -1px;
        border-radius: 0;
    }
    .btn-group-vertical.btn-group-custom > .btn:last-child {
        border-radius: 0
    }
}
@media (min-width:300px) and (max-width:767px) { 
    .btn-group-vertical.btn-group-custom > .btn {
        float: left;
        width: auto;
        border-top: 1px solid #ccc;
    }
    .btn-group-vertical.btn-group-custom .btn + .btn {
        margin-left: -1px;
        margin-top: 0;
    }
    .btn-group-vertical.btn-group-custom > .btn:first-child {
        border-radius: 4px 0 0 4px
    }
    .btn-group-vertical.btn-group-custom > .btn:last-child {
        border-radius: 0 4px 4px 0
    }
}

wow, very cool. Honestly more than I want for my current stage (just want something simple right now), but I've bookmarked this for later. Thanks for sharing! — Hamy, Sep 29 '14 at 06:23

Make button group that flows vertically to horizontally cleanly

2 Answers2

DEMO: http://jsbin.com/vahaq/1/