Bootstrap入力グループ完全ガイド｜初心者でもわかる.input-groupの使い方

入力グループ（.input-group）：ボタン・テキスト・アイコンの組み合わせ

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

生徒

「フォームにボタンや文字をくっつけた入力欄って、どうやって作るんですか？」

先生

「Bootstrapの入力グループを使うと、とても簡単に作れます。」

生徒

「パソコンを触ったことがなくても理解できますか？」

先生

「もちろんです。箱を横に並べるイメージで考えてみましょう。」

1. Bootstrapの入力グループとは何か

Bootstrapの入力グループとは、文字を入力する欄と、文字やボタン、アイコンなどを横にくっつけて表示するための仕組みです。検索フォームや金額入力など、実際のWebサイトでよく見かける形を簡単に作れます。難しいプログラムを書かなくても、決まったクラス名を使うだけで見た目が整います。

2. input-groupの基本構造を理解しよう

入力グループは、大きな箱の中に小さな箱を並べるイメージです。外側にinput-groupというクラスをつけ、その中に入力欄やテキストを入れます。横に並ぶのはBootstrapが自動で調整してくれるので安心です。


<div class="input-group mb-3">
    <span class="input-group-text">名前</span>
    <input type="text" class="form-control" placeholder="名前を入力">
</div>

ブラウザ表示

3. テキストを組み合わせた入力グループ

input-group-textを使うと、入力欄の横に説明用の文字を表示できます。これは「ここには何を入力するのか」を利用者に伝えるための目印です。紙の申込書に書いてある項目名と同じ役割だと考えるとわかりやすいです。


<div class="input-group mb-3">
    <span class="input-group-text">メール</span>
    <input type="email" class="form-control" placeholder="example@example.com">
</div>

ブラウザ表示

4. ボタンを組み合わせた入力グループ

検索フォームでは、入力欄の横に検索ボタンがあることが多いです。入力グループでは、ボタンも簡単に横に並べられます。ボタンはクリックできる部品で、押すと何かが起こる合図になります。


<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="キーワード検索">
    <button class="btn btn-primary">検索</button>
</div>

ブラウザ表示

5. アイコンを使った入力グループ

Bootstrapアイコンを使うと、見た目がさらにわかりやすくなります。アイコンは絵文字のような役割で、文字が読めなくても意味が伝わります。初心者にも優しいデザインになります。


<div class="input-group mb-3">
    <span class="input-group-text">
        <i class="bi bi-search"></i>
    </span>
    <input type="text" class="form-control" placeholder="検索">
</div>

ブラウザ表示

6. 前と後ろに要素を置く考え方

入力グループでは、入力欄の前にも後ろにも部品を置けます。金額入力で円マークを前に置いたり、単位を後ろに置いたりするのが代表例です。これは現実の値札やメモ帳と同じ考え方です。


<div class="input-group mb-3">
    <span class="input-group-text">¥</span>
    <input type="text" class="form-control">
    <span class="input-group-text">円</span>
</div>

ブラウザ表示