5

How can I change the orient vertical/horizontal of a btn-group with bootstrap4 ONLY classes, I could not find any btn-group-vertical-xs , -md, -lg classes.

<div class="btn-group-vertical">
  ...
</div>
Pascal
  • 12,265
  • 25
  • 103
  • 195

2 Answers2

1

Using pure Bootstrap you would make a horizontal group and a vertical one, and toggle between them using display classes:

<div class="btn-group d-none d-sm-block">
    <button class="btn">Button 1</button>
    <button class="btn">Button 2</button>
</div>

<div class="btn-group-vertical d-block d-sm-none">
    <button class="btn">Button 1</button>
    <button class="btn">Button 2</button>
</div>

Note that the hidden-* and visible-* classes no longer exist in Bootstrap 4 Beta. See this other answer for a conversion table.

Adrian Martin
  • 2,307
  • 2
  • 21
  • 22
0

Since the btn-group is now display: flexbox, you can use flex-column class to make it vertical...

<div class="btn-group flex-column" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

http://codeply.com/go/Y3BVq9I49h

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 2
    It seems you misunderstood me. My question is no how to make a btn-group vertically aligned items. For this I have btn-group-vertical :P I was asking to change the btn-group-vertical to horizontal under certain bootstrap sizes without using custom media queries. – Pascal May 01 '17 at 18:43