Bootstrapのボタングループ完全入門！初心者でもわかる横並び・区切り・折返しの使い方

ボタングループ（.btn-group）で横並び・区切り・折返しを実装

先生と生徒の会話形式で理解しよう

生徒

「ボタンを横に並べたいんですが、きれいに揃わなくて困っています…」

先生

「Bootstrapのボタングループを使うと、横並びや区切りがとても簡単になりますよ。」

生徒

「パソコンを触ったばかりでも使えますか？」

先生

「もちろんです。箱にボタンを入れる感覚で覚えられます。」

1. Bootstrapのボタングループとは何か

Bootstrapのボタングループは、複数のボタンをひとつのまとまりとして表示するための仕組みです。机の上にボタンをバラバラに置くのではなく、トレーにまとめて置くイメージです。これにより、見た目が整い、操作もしやすくなります。Bootstrapを使うと、難しいCSSを書かなくても、クラスを指定するだけで整ったデザインになります。

2. ボタングループで横並びにする基本

ボタンを横に並べたいときは、ボタングループ用のクラスを使います。ボタン全体を包む箱を用意して、その中にボタンを入れるだけです。初心者の方は「親」と「子」の関係だと考えると分かりやすいです。


<div class="btn-group">
    <button class="btn btn-primary">左</button>
    <button class="btn btn-primary">中央</button>
    <button class="btn btn-primary">右</button>
</div>

ブラウザ表示

3. ボタン同士を区切って表示する方法

ボタングループを使うと、ボタンとボタンの境界線が自動で調整されます。これは、ボタンが一つの部品として扱われているためです。区切りがあることで、押し間違いを防ぎやすくなります。スマートフォンのアプリの操作ボタンと同じ感覚です。


<div class="btn-group">
    <button class="btn btn-outline-secondary">編集</button>
    <button class="btn btn-outline-secondary">保存</button>
    <button class="btn btn-outline-secondary">削除</button>
</div>

ブラウザ表示

4. ボタンのサイズをそろえて見やすくする

ボタンの大きさがバラバラだと、見た目がごちゃごちゃしてしまいます。ボタングループでは、サイズ指定を一括で行えます。これは、全員同じ制服を着せるようなイメージです。大きさを揃えることで、初心者が見ても安心感のある画面になります。


<div class="btn-group btn-group-lg">
    <button class="btn btn-success">はい</button>
    <button class="btn btn-success">いいえ</button>
</div>

ブラウザ表示

5. ボタングループを縦に並べる考え方

基本は横並びですが、縦に積み重ねたい場面もあります。エレベーターのボタンを思い出してください。上から下に並んでいますよね。このような配置もBootstrapなら簡単に実現できます。横並びが基本で、応用として縦並びがあると覚えると混乱しません。


<div class="btn-group-vertical">
    <button class="btn btn-warning">上</button>
    <button class="btn btn-warning">中</button>
    <button class="btn btn-warning">下</button>
</div>

ブラウザ表示

6. 画面幅に応じて折り返す仕組み

画面が狭くなると、横一列に並んだボタンがはみ出してしまうことがあります。ボタングループ自体は折り返しませんが、外側のレイアウトと組み合わせることで自然な折り返しが可能です。これは、長い机を部屋に合わせて配置し直す感覚に近いです。


<div class="d-flex flex-wrap">
    <div class="btn-group me-2 mb-2">
        <button class="btn btn-info">A</button>
        <button class="btn btn-info">B</button>
    </div>
    <div class="btn-group me-2 mb-2">
        <button class="btn btn-info">C</button>
        <button class="btn btn-info">D</button>
    </div>
</div>

ブラウザ表示