<p dir="auto">So if the viewport width is too small to show all buttons in a row, it transform into a dropdown. It could be offered via an optional trigger.</p>
<p dir="auto">Hi, I'm loving Bootstrap 3!</p>
<p dir="auto">One problem I'm encountering is that button panels aren't "responsive" enough. I'd like to have <code class="notranslate">.btn-block</code> style buttons below 768px, and normal <code class="notranslate">.btn</code> style above, potentally with <code class="notranslate">.pull-left</code> or <code class="notranslate">.pull-right</code></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/a6c3a10a56c0eb33cff4efe2a5864261da4dad9806eba6e3585b612e34402abe/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f32373635352f3933313236392f65623035323639612d303032382d313165332d383837622d3863316565666335376531642e706e67"><img src="https://camo.githubusercontent.com/a6c3a10a56c0eb33cff4efe2a5864261da4dad9806eba6e3585b612e34402abe/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f32373635352f3933313236392f65623035323639612d303032382d313165332d383837622d3863316565666335376531642e706e67" alt="btn-responsive" data-canonical-src="https://f.cloud.github.com/assets/27655/931269/eb05269a-0028-11e3-887b-8c1eefc57e1d.png" style="max-width: 100%;"></a></p>
<p dir="auto">Here's the proposal for this (thanks <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ggam/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ggam">@ggam</a>):</p>
<div class="highlight highlight-source-css-less notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@media (max-width: @screen-sm) {
  .btn-group-responsive {
    margin-bottom: -10px;
    .btn {
      .btn-block(); // Reuse btn-block code
      margin-bottom: 10px;
    }
    .pull-left, .pull-right {
      float: none !important;
    }
  }
}"><pre class="notranslate"><span class="pl-k">@media</span> (<span class="pl-c1">max-width</span>: <span class="pl-smi">@screen-sm</span>) {
  <span class="pl-e">.btn-group-responsive</span> {
    <span class="pl-c1">margin-bottom</span>: <span class="pl-c1">-10<span class="pl-k">px</span></span>;
    <span class="pl-e">.btn</span> {
      <span class="pl-e">.btn-block</span>(); <span class="pl-c"><span class="pl-c">//</span> Reuse btn-block code</span>
      <span class="pl-c1">margin-bottom</span>: <span class="pl-c1">10<span class="pl-k">px</span></span>;
    }
    <span class="pl-e">.pull-left</span>, <span class="pl-e">.pull-right</span> {
      <span class="pl-c1">float</span>: <span class="pl-c1">none</span> <span class="pl-k">!important</span>;
    }
  }
}</pre></div>