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

Answer 1

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>