Bootstrap 3 "btn-group" non-responsive behavior on small screens

Question

Is there a bootstrap 3 way to handle small screen sizes for "btn-group"?

Button group is placed in <td> and wrapped in <div class="btn-group">:

Looks okay, until you re-size it to <768px. Then you have:

How to make them persistent? I tried to add class btn-group-justified. But it gives as a result full width buttons and looks even worse on re-size to small screen size.

P.S> I have an idea, how to implement it adding full set of custom classes. My question is about bootstrap3 way. May be I missed something.

Answer 1

You can create two button groups with the same buttons and make one of them btn-group-vertical. Then after applying the hidden-xs and visible-xs to them you can hide and show vertical group on appropriate screen size.

<div class="btn-group hidden-xs">     <button class="btn btn-default">View</button>     <button class="btn btn-default">Delete</button> </div> <div class="btn-group-vertical visible-xs">     <button class="btn btn-default">View</button>     <button class="btn btn-default">Delete</button> </div> 

Unfortunately, this requries repeating the markup of the buttons but it should not be an issue if you use any templating tool (define the markup once and include it twice).

Wide screen:

Narrow screen:

See the JSFiddle.

Answer 2

I want to offer you a version with icons from FontAwesome. With a minimum screen resolution text hide leaving only icons.

Sorry for my english.

<div class="btn-group">     <button class="btn btn-default" title="View"><i class="fa fa-eye"></i><span class="hidden-xs"> View</span></button>     <button class="btn btn-default" title="Delete"><i class="fa fa-times"></i><span class="hidden-xs"> Delete</span></button> </div>   

UPDATE by Vishal Kumar: add GLYPHICONS preview

Check this fiddle: http://jsfiddle.net/Jeen/w33GD/4/