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

2019-10-29 2019-10-30

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

Contents

How to
Reference site

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

Button 1 Button 2 Button 3 Button 4 Button 5

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

Button 1 Button 2 Button 3 Button 4 Button 5

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

Button 1 Button 2 Button 3 Button 4 Button 5

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

Button 1 Button 2 Button 3 Button 4 Button 5

Reference site

記事がお役に立ちましたらシェアお願いします！