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

css, html, twitter-bootstrap-3

Solution

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/

Problem

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.

Original source