[Bootstrap4] Como alternar verticalmente os grupos de botões lado a lado [Responsive]

Apresentando como alternar o grupo de botões “Bootstrap4” “Horizontal” para “Vertical”, tornando-o responsivo.

Como

Use a propriedade Bootstrap4 Display.

xs:576px

Código

<!--btn-group-->
<div class="d-none d-sm-block">
<div class="btn-group d-flex">
<a href="#" class="btn btn-primary">Button 1</a>
<a href="#" class="btn btn-primary">Button 2</a>
<a href="#" class="btn btn-primary">Button 3</a>
<a href="#" class="btn btn-primary">Button 4</a>
<a href="#" class="btn btn-primary">Button 5</a>
</div>
</div>
<!--//btn-group-->
<!--btn-group-vertical-->
<div class="d-block d-sm-none">
<div class="btn-group-vertical d-flex">
<a href="#" class="btn btn-primary">Button 1</a>
<a href="#" class="btn btn-primary">Button 2</a>
<a href="#" class="btn btn-primary">Button 3</a>
<a href="#" class="btn btn-primary">Button 4</a>
<a href="#" class="btn btn-primary">Button 5</a>
</div>
</div>
<!--//btn-group-vertical-->

Exibição

sm:768px

Código

<!--btn-group-->
<div class="d-none d-md-block">
<div class="btn-group d-flex">
<a href="#" class="btn btn-primary">Button 1</a>
<a href="#" class="btn btn-primary">Button 2</a>
<a href="#" class="btn btn-primary">Button 3</a>
<a href="#" class="btn btn-primary">Button 4</a>
<a href="#" class="btn btn-primary">Button 5</a>
</div>
</div>
<!--//btn-group-->
<!--btn-group-vertical-->
<div class="d-block d-md-none">
<div class="btn-group-vertical d-flex">
<a href="#" class="btn btn-primary">Button 1</a>
<a href="#" class="btn btn-primary">Button 2</a>
<a href="#" class="btn btn-primary">Button 3</a>
<a href="#" class="btn btn-primary">Button 4</a>
<a href="#" class="btn btn-primary">Button 5</a>
</div>
</div>
<!--//btn-group-vertical-->

Exibição

md:992px

Código

<!--btn-group-->
<div class="d-none d-lg-block">
<div class="btn-group d-flex">
<a href="#" class="btn btn-primary">Button 1</a>
<a href="#" class="btn btn-primary">Button 2</a>
<a href="#" class="btn btn-primary">Button 3</a>
<a href="#" class="btn btn-primary">Button 4</a>
<a href="#" class="btn btn-primary">Button 5</a>
</div>
</div>
<!--//btn-group-->
<!--btn-group-vertical-->
<div class="d-block d-lg-none">
<div class="btn-group-vertical d-flex">
<a href="#" class="btn btn-primary">Button 1</a>
<a href="#" class="btn btn-primary">Button 2</a>
<a href="#" class="btn btn-primary">Button 3</a>
<a href="#" class="btn btn-primary">Button 4</a>
<a href="#" class="btn btn-primary">Button 5</a>
</div>
</div>
<!--//btn-group-vertical-->

Exibição

lg:1200px

Código

<!--btn-group-->
<div class="d-none d-xl-block">
<div class="btn-group d-flex">
<a href="#" class="btn btn-primary">Button 1</a>
<a href="#" class="btn btn-primary">Button 2</a>
<a href="#" class="btn btn-primary">Button 3</a>
<a href="#" class="btn btn-primary">Button 4</a>
<a href="#" class="btn btn-primary">Button 5</a>
</div>
</div>
<!--//btn-group-->
<!--btn-group-vertical-->
<div class="d-block d-xl-none">
<div class="btn-group-vertical d-flex">
<a href="#" class="btn btn-primary">Button 1</a>
<a href="#" class="btn btn-primary">Button 2</a>
<a href="#" class="btn btn-primary">Button 3</a>
<a href="#" class="btn btn-primary">Button 4</a>
<a href="#" class="btn btn-primary">Button 5</a>
</div>
</div>
<!--//btn-group-vertical-->

Exibição

Site de referência

Artigo relacionado