[Bootstrap4] How to switch side-by-side button groups vertically [Responsive]

Introducing how to switch the “Bootstrap4” “Horizontal” button group to “Vertical” by making it responsive.

How to

Use the Bootstrap4 Display property.

xs:576px

Code

<!--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-->

Display

sm:768px

Code

<!--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-->

Display

md:992px

Code

<!--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-->

Display

lg:1200px

Code

<!--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-->

Display

Reference site

Related article

%d bloggers like this: