1. HOME»
  2. プログラミング・Web»
  3. Bootstrap»
  4. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。

前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。
Bootstrapにはボタングループという機能があり、今回はそれを使っていこうと思います。

目次
  1. ボタングループの基本的な使い方
  2. ボタングループのサイズを指定する
  3. ツールバー
  4. 縦並びのボタングループ
  5. まとめ
  6. 参考サイト

ボタングループの基本的な使い方

ボタングループの使ってみます。
まず、ボタンを3つ作成してみましょう。

<button type="button" class="btn btn-primary">ボタン</button>
<button type="button" class="btn btn-primary">ボタン</button>
<button type="button" class="btn btn-primary">ボタン</button>

このように横並びのボタンができます。
これは前回と同じ方法です。

ではこれらのボタンをグループにしていきたいと思います。
ボタンをグループにするには、btn-groupというクラスを使います。
使い方は、先ほどのボタンをdivタグで囲み、そのdivタグにbtn-groupクラスを指定します。

<div class="btn-group" role="group" aria-label="ボタングループサンプル">
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
</div>

ボタングループのサイズを指定する

ボタンと同様に、ボタングループにもサイズを指定することができます。
サイズの指定には「btn-group-lg」「btn-group-sm」を使用します。

<div class="btn-group btn-group-lg" role="group" aria-label="ボタングループサンプル">
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
</div>
<div class="btn-group" role="group" aria-label="ボタングループサンプル">
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="ボタングループサンプル">
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
</div>

ツールバー

ボタングループをツールバーとしてさらにひとまとめにすることもできます。

<div class="btn-toolbar" role="toolbar" aria-label="ツールバー">
	<div class="btn-group" role="group" aria-label="ボタングループ">
		<button type="button" class="btn btn-primary">1</button>
		<button type="button" class="btn btn-primary">2</button>
		<button type="button" class="btn btn-primary">3</button>
	</div>
	<div class="btn-group" role="group" aria-label="ボタングループ">
		<button type="button" class="btn btn-primary">4</button>
		<button type="button" class="btn btn-primary">5</button>
	</div>
	<div class="btn-group" role="group" aria-label="ボタングループ">
		<button type="button" class="btn btn-primary">6</button>
	</div>
</div>

縦並びのボタングループ

次に縦並びのボタングループを作成してみましょう。
縦並びのボタングループを作成するには、「btn-group-vertical」クラスを使います。

<div class="btn-group-vertical" role="group" aria-label="ボタングループサンプル">
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
	<button type="button" class="btn btn-primary">ボタン</button>
</div>

まとめ

bootstrap4のボタングループ機能を使うと、ボタンをひとまとまりにすることができ、サイトの見た目がよくなります。
さらにボタングループは、横並びにも縦並びにもすることができますし、ボタングループをさらにひとまとめにすることもできます。

ボタングループの使い方を覚えておくと、サイトを作るうえでとても便利になります。
以上、ボタングループの使い方の紹介でした。

参考サイト

参考サイト : Bootstrap 公式ページ

このシリーズの一覧はこちら

  1. Bootstrap5を読み込む為の方法を徹底解説
  2. 【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。
  3. 【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法
  4. 【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!
  5. Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!
  6. 【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法
  7. 【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方
  8. 【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!
オリジナルゲーム.com