[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.
Contents
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
記事がお役に立ちましたらシェアお願いします！