Twitter Bootstrap 3 - how can I switch from a horizontal button group to vertical button group based on screen size?

Question

I have a horizontal button group that I would like to have it switch to a vertical button group with the screen size is extra small (-xs). Is there a way to do that with Bootstrap 3 classes?

Answer 1

Using jquery to detect the window size and adapt the class of the menu correspondingly:

<div class="btn-group" id="responsive">
  <button class="btn">Hello</button>
  <button class="btn">World</button>
</div>

<script>
$(window).resize(function() {
  if ($(window).width() < 408) {
    $('#responsive').removeClass('btn-group');
    $('#responsive').addClass('btn-group-vertical');
  } else {
    $('#responsive').addClass('btn-group');
    $('#responsive').removeClass('btn-group-vertical');
  }
});
</script>

With pure bootstrap you would make two menus: a horizontal and a vertical one:

<div class="btn-group hidden-xs">
  <button class="btn">Hello</button>
  <button class="btn">World</button>
</div>

<div class="btn-group-vertical visible-xs">
  <button class="btn">Hello</button>
  <button class="btn">World</button>
</div>

In an ideal world you would do this using only media queries in css, but adding custom media queries to bootstrap may be a bit more complex.