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

bootstrap 3 cdn
bootstrap 3 w3schools
bootstrap 4 w3schools
bootstrap 4 tutorial
bootstrap 4 components
bootstrap css
bootstrap components
bootstrap templates

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.


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/

CSS · Bootstrap, With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it.


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.

Bootstrap · The most popular HTML, CSS, and JS library in the world., The most popular HTML, CSS, and JS library in the world. Bootstrap is a free CSS framework. Bootstrap 3 is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. Bootstrap 3 is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes.


Here's an alternative to @fracz's answer you can try that won't duplicate HTML content. Just copied the css from btn-vertical-group and btn-group and used a media query.

All you have to do is add btn-toolbar-responsive to the toolbar div's classes.

It's in scss for simplicity although you can convert it online easily. Here is the JS Bin: demo

SCSS:

.btn-toolbar.btn-toolbar-responsive{
  text-align: center;
  margin: 0;
  .btn-group{
    float: none;
  }

  @media (max-width: 767px){
    .btn + .btn,
    .btn + .btn-group,
    .btn-group + .btn,
    .btn-group + .btn-group {
      margin-top: -1px;
      margin-left: 0;
    }


    .btn-group{
      position: relative;
      display: block;
      vertical-align: middle;
      margin: 0;
      .btn {
        display: block;
        float: none;
        max-width: 100%;

      }
      .btn:not(:first-child):not(:last-child) {
        border-radius: 0;
      }
      .btn:first-child:not(:last-child) {
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }
      .btn:last-child:not(:first-child) {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
      }

    }
    .btn-group:not(:first-child):not(:last-child) {
      .btn {
        border-radius: 0;
      }
    }

    .btn-group:first-child:not(:last-child) {
      .btn:last-child, .dropdown-toggle {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    .btn-group:last-child:not(:first-child) {
      .btn:first-child {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
      }
    }
  }

}

Bootstrap 3 Tutorial, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see what's new in the v3.0 release announcement. Major class changes. This table shows the style changes between v2.x and v3.0.


Okay, so this worked in a test page I made:

<div class='btn-group'>
    <button class='btn btn-default col-xs-6'>View</button>
    <button class='btn btn-default col-xs-6'>Delete</button>
</div>

Forcing each button to be 50% using col-xs-6 kept it from wrapping in my own test page modeled after your example. However, if you have a wider table than the example and you squish down to 320px, the text will overflow the buttons and it looks even worse than your bad example.

You may already know this and it may not be practical for your situation, so I apologize if I'm just presenting unhelpful examples. However, if your table is much wider than what you posted as an example, I would suggest making your rows using the BS grid instead of a table. What this allows you to do is make a single row become two rows when the page shrinks, e.g.

<div class='row'>
    <div class='col-xs-12 col-sm-6'>Some additional details</div>
    <div class='col-xs-6 col-sm-3'>Date</div>
    <div class='col-xs-6 col-sm-3'>
        <div class='btn-group'>
            <button class='btn btn-default col-xs-6'>View</button>
            <button class='btn btn-default col-xs-6'>Delete</button>
        </div>
    </div>
</div>

then, just find a way to alternate colors, add borders, or whatever you need to show the separation between the multiple row rows.

In the BootPly that I just made, as I said, the buttons start to overlap at very small sizes, but they don't wrap when inside a <td> in my browser tests:

http://www.bootply.com/117330

Bootstrap 3 or Bootstrap 4, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Bootstrap. Build responsive, mobile-first projects on the web with the world’s most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.


try to set min-width on <td>

<td style="min-width: 90px">
    <div class="btn-group">
        <button class=" btn btn-default btn-circle" type="button">
            <i class="fa fa-check"></i>
        </button>
        <button class=" btn btn-default btn-circle" type="button">
            <i class="fa fa-question"></i>
        </button>
        <button class=" btn btn-default btn-circle" type="button">
            <i class="fa fa-times"></i>
        </button>
    </div>
</td>

Getting started · Bootstrap 3.0.3 Documentation, You can find docs for all previous Bootstrap versions at BootstrapDocs. Download Bootstrap. Compiled CSS, JS, and fonts; Additional downloads; Bootstrap CDN. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first .


CSS · Bootstrap 3.3.6 Documentation, You can find docs for all previous Bootstrap versions at BootstrapDocs. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead  Bootstrap 2 and 3 On January 31, 2012, Bootstrap 2 was released, which added built-in support for Glyphicons, several new components, as well as changes to many of the existing components. This version supports responsive web design .


Bootstrap (front-end framework), The next major version, Bootstrap 3, was released on August 19, 2013. It redesigned components to use flat design, and a mobile first approach. Bootstrap 3 Tutorial BS HOME BS Get Started BS Grid Basic BS Typography BS Tables BS Images BS Jumbotron BS Wells BS Alerts BS Buttons BS Button Groups BS Glyphicons BS Badges/Labels BS Progress Bars BS Pagination BS Pager BS List Groups BS Panels BS Dropdowns BS Collapse BS Tabs/Pills BS Navbar BS Forms BS Inputs BS Inputs 2 BS Input Sizing BS


Bootstrap 3 documentation, Bootstrap 3. An overview of Bootstrap, how to download and use, basic templates and examples, and more. Download. Bootstrap (currently v3.4.1) has a few