【Bootstrap4】横並びボタングループをレスポンシブ対応させて縦並びに切り替える方法

『Bootstrap4』の「横並び」ボタングループをレスポンシブに対応させて、「縦並び」に切り替える方法をご紹介します。

実装方法

Bootstrap4の表示ユーティリティ(Display property)を用います。

極小 縦向きモバイル (xs:横幅576px未満 )で切り替え

ソース

<!--横並びボタン-->
<div class="d-none d-sm-block">
<div class="btn-group d-flex">
<a href="#" class="btn btn-primary">ボタン1</a>
<a href="#" class="btn btn-primary">ボタン2</a>
<a href="#" class="btn btn-primary">ボタン3</a>
<a href="#" class="btn btn-primary">ボタン4</a>
<a href="#" class="btn btn-primary">ボタン5</a>
</div>
</div>
<!--//横並びボタン-->
<!--縦並びボタン-->
<div class="d-block d-sm-none">
<div class="btn-group-vertical d-flex">
<a href="#" class="btn btn-primary">ボタン1</a>
<a href="#" class="btn btn-primary">ボタン2</a>
<a href="#" class="btn btn-primary">ボタン3</a>
<a href="#" class="btn btn-primary">ボタン4</a>
<a href="#" class="btn btn-primary">ボタン5</a>
</div>
</div>
<!--縦並びボタン-->

表示

小 横向きモバイル (sm:横幅768px未満)で切り替え

ソース

<!--横並びボタン-->
<div class="d-none d-md-block">
<div class="btn-group d-flex">
<a href="#" class="btn btn-primary">ボタン1</a>
<a href="#" class="btn btn-primary">ボタン2</a>
<a href="#" class="btn btn-primary">ボタン3</a>
<a href="#" class="btn btn-primary">ボタン4</a>
<a href="#" class="btn btn-primary">ボタン5</a>
</div>
</div>
<!--//横並びボタン-->
<!--縦並びボタン-->
<div class="d-block d-md-none">
<div class="btn-group-vertical d-flex">
<a href="#" class="btn btn-primary">ボタン1</a>
<a href="#" class="btn btn-primary">ボタン2</a>
<a href="#" class="btn btn-primary">ボタン3</a>
<a href="#" class="btn btn-primary">ボタン4</a>
<a href="#" class="btn btn-primary">ボタン5</a>
</div>
</div>
<!--縦並びボタン-->

表示

中 タブレット (md:横幅992px未満)で切り替え

ソース

<!--横並びボタン-->
<div class="d-none d-lg-block">
<div class="btn-group d-flex">
<a href="#" class="btn btn-primary">ボタン1</a>
<a href="#" class="btn btn-primary">ボタン2</a>
<a href="#" class="btn btn-primary">ボタン3</a>
<a href="#" class="btn btn-primary">ボタン4</a>
<a href="#" class="btn btn-primary">ボタン5</a>
</div>
</div>
<!--//横並びボタン-->
<!--縦並びボタン-->
<div class="d-block d-lg-none">
<div class="btn-group-vertical d-flex">
<a href="#" class="btn btn-primary">ボタン1</a>
<a href="#" class="btn btn-primary">ボタン2</a>
<a href="#" class="btn btn-primary">ボタン3</a>
<a href="#" class="btn btn-primary">ボタン4</a>
<a href="#" class="btn btn-primary">ボタン5</a>
</div>
</div>
<!--縦並びボタン-->

表示

大 デスクトップ (lg:横幅1200px未満)で切り替え

ソース

<!--横並びボタン-->
<div class="d-none d-xl-block">
<div class="btn-group d-flex">
<a href="#" class="btn btn-primary">ボタン1</a>
<a href="#" class="btn btn-primary">ボタン2</a>
<a href="#" class="btn btn-primary">ボタン3</a>
<a href="#" class="btn btn-primary">ボタン4</a>
<a href="#" class="btn btn-primary">ボタン5</a>
</div>
</div>
<!--//横並びボタン-->
<!--縦並びボタン-->
<div class="d-block d-xl-none">
<div class="btn-group-vertical d-flex">
<a href="#" class="btn btn-primary">ボタン1</a>
<a href="#" class="btn btn-primary">ボタン2</a>
<a href="#" class="btn btn-primary">ボタン3</a>
<a href="#" class="btn btn-primary">ボタン4</a>
<a href="#" class="btn btn-primary">ボタン5</a>
</div>
</div>
<!--縦並びボタン-->

表示

横ボタンと縦ボタンの種類を用意しないといけないのでスマートなやり方とは言えませんが、現状これがベストかと思います。

関連記事