Bootstrapフォームのレイアウト設計を完全解説！1列・2列・グリッドフォームをブレークポイント別に作ろう

レイアウト設計：1列/2列/グリッドフォームをブレークポイント別に作る

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

生徒

「Bootstrapでフォームを作るとき、画面サイズごとに並び方を変えたいんですが、どう考えればいいですか？」

先生

「Bootstrapのグリッドとブレークポイントを使えば、1列や2列のフォームを簡単に切り替えられます。」

生徒

「パソコンもスマホも同じHTMLで大丈夫なんですか？」

先生

「はい。同じHTMLでも、Bootstrapのクラス指定で自動的にレイアウトが変わります。」

1. Bootstrapフォームとレイアウト設計の考え方

Bootstrapのフォームレイアウトとは、入力欄やラベルをどのように並べるかを決める設計のことです。紙の申込書を想像すると分かりやすく、縦に並べるか、左右に分けるかを決める作業に似ています。Bootstrapでは画面の横幅に応じて並び方を変えられるため、スマホでは1列、パソコンでは2列といった表示が簡単にできます。

2. ブレークポイントとは何かを知ろう

ブレークポイントとは、画面サイズの区切りのことです。Bootstrapではスマホ、タブレット、パソコンなどを想定した幅が用意されています。これにより「この幅以上なら2列にする」といった指定が可能になります。難しく考えず、画面の大きさごとのルール表だと思ってください。

3. 1列フォームの基本レイアウト

1列フォームは、入力欄を上から下へ順番に並べる一番シンプルな形です。スマートフォンでは特に見やすく、初心者にも扱いやすい構成です。


<form class="container">
    <div class="mb-3">
        <label class="form-label">名前</label>
        <input type="text" class="form-control">
    </div>
    <div class="mb-3">
        <label class="form-label">メール</label>
        <input type="email" class="form-control">
    </div>
</form>

ブラウザ表示

4. 2列フォームをBootstrapグリッドで作る

2列フォームは、横に並べて表示する形式です。パソコン画面では入力項目が一目で見渡せるため、住所や個人情報入力でよく使われます。Bootstrapのrowとcolを使うことで簡単に実現できます。


<form class="container">
    <div class="row">
        <div class="col-md-6 mb-3">
            <label class="form-label">姓</label>
            <input type="text" class="form-control">
        </div>
        <div class="col-md-6 mb-3">
            <label class="form-label">名</label>
            <input type="text" class="form-control">
        </div>
    </div>
</form>

ブラウザ表示

5. スマホでは1列・PCでは2列に切り替える方法

Bootstrapの強みは、ブレークポイントごとに列数を変えられる点です。小さい画面では縦並び、大きい画面では横並びにすることで、どの端末でも使いやすいフォームになります。


<form class="container">
    <div class="row">
        <div class="col-12 col-md-6 mb-3">
            <label class="form-label">電話番号</label>
            <input type="tel" class="form-control">
        </div>
        <div class="col-12 col-md-6 mb-3">
            <label class="form-label">郵便番号</label>
            <input type="text" class="form-control">
        </div>
    </div>
</form>

ブラウザ表示

6. グリッドフォームで複雑な入力画面を作る

グリッドフォームとは、12分割の考え方を使って細かく幅を調整するレイアウトです。棚に物を区切って並べるようなイメージで、項目ごとに広さを変えられます。


<form class="container">
    <div class="row">
        <div class="col-md-4 mb-3">
            <label class="form-label">都道府県</label>
            <input type="text" class="form-control">
        </div>
        <div class="col-md-8 mb-3">
            <label class="form-label">住所</label>
            <input type="text" class="form-control">
        </div>
    </div>
</form>

ブラウザ表示