Change the orientation of a group of buttons vertically / horizontally using BS4 classes

Question

How to change the vertical / horizontal orientation of a btn group using only bootstrap4 ON classes, I could not find the btn-group-vertical-xs, -md, -lg classes.

<div class="btn-group-vertical">
  ...
</div>

Answer 1

Since btn-groupnow display: flexbox, you can use the class flex-columnto 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

Answer 2

Using pure Bootstrap, you will make a horizontal group and a vertical one, and switch 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>

, hidden-* visible-* - Bootstrap 4. . .