4

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
  • 11,273
  • 23
  • 91
  • 185

2 Answers2

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

Zim
  • 329,487
  • 83
  • 671
  • 600
  • 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
0

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,157
  • 2
  • 21
  • 22