Ilia Shakitko Ilia Shakitko - 5 months ago 56
HTML Question

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

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">
:

btn-group

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

enter image description here

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

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: add GLYPHICONS preview

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