Bootstrapでは何ができる
CSSを個別に書く必要がなく、クラスを書くだけで勝手にスタイルが適応されるようになる。
苦痛で仕方ないCSS記述作業がなくなる。
使い方
headタグの中に、以下のようにリンクを設定するだけ。
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
【カテゴリ1】レイアウト系（4つ）
container
ページ全体の横幅を制限して、左右に余白を作るクラス。
ポイント： 基本的に<body>直下の一番外側のdivに使います。ページのベースとして毎回使うと思ってください。
row / col
画面を12分割の格子に区切って、横並びレイアウトを作るクラスです。この2つはセットで使います。
エクセルの表を想像してください。rowが「行」、colが「列のセル」です。12列の表があって、その中に要素を配置するイメージです。
<!-- 商品を横3列に並べる例 -->
<div class="container">
<div class="row">
<!-- 12 ÷ 4 = 3列 -->
<div class="col-4">商品A</div>
<div class="col-4">商品B</div>
<div class="col-4">商品C</div>
</div>
</div>
<!-- 画面サイズで列数を変える（レスポンシブ）例 -->
<!-- スマホ：1列、タブレット：2列、PC：3列 -->
<div class="col-12 col-md-6 col-lg-4">商品A</div>
col-の後の数字は「12のうちいくつ使うか」です。col-4なら12分の4（1/3）の幅になります。数字の合計が12になるよう組み合わせます。
d-flex / justify-content-* / align-items-*
要素を横並びにして、位置を細かく調整するクラスです（Flexboxという技術を使います）。
本棚に本を並べるイメージです。
d-flexで「この棚は横並び」と宣言し、
justify-content-centerで「本を棚の中央に集める」、
align-items-centerで「本の高さを揃える」操作をします。
<!-- ボタンを横並びにして、中央に配置する -->
<div class="d-flex justify-content-center">
<button class="btn btn-primary">編集</button>
<button class="btn btn-danger">削除</button>
</div>
<!-- よく使うjustify-contentの値 -->
<!-- justify-content-start : 左寄せ（デフォルト） -->
<!-- justify-content-center : 中央寄せ -->
<!-- justify-content-end : 右寄せ -->
<!-- justify-content-between : 両端に配置、残りは均等 -->
初学者向け注記：
FlexboxとGridは現代のWebレイアウトの中核技術ですが、詳細を理解するには専用の学習が必要です。今は
「d-flexを書くと横並びになる」
「justify-content-centerで中央に来る」
という使い方だけ覚えれば十分です。
【カテゴリ2】ボタン・フォーム系（4つ）
btn + btn-*
ボタンをきれいに装飾するクラスです。
<!-- 色のバリエーション -->
<button class="btn btn-primary">青（メイン操作）</button>
<button class="btn btn-secondary">グレー（補助操作）</button>
<button class="btn btn-success">緑（成功・登録）</button>
<button class="btn btn-danger">赤（削除・危険）</button>
<button class="btn btn-warning">黄（注意）</button>
<!-- サイズ変更 -->
<button class="btn btn-primary btn-sm">小さいボタン</button>
<button class="btn btn-primary btn-lg">大きいボタン</button>
<!-- Laravelのリンクをボタン風に見せる -->
<a href="/products/1/edit" class="btn btn-warning">編集</a>
form-control
<input>や<textarea>などのフォーム入力欄を整えるクラスです。
入力枠の角を丸っこくして、視覚的にキレイにします。
また<input>がアクティブになると、枠を青くしてアクティブになっていることを視覚的に分かりやすくします。
紙の申請書で、記入欄に罫線が引いてあると書きやすいですよね。form-controlはその「記入欄の罫線と余白」を整えてくれます
<!-- Laravelのフォーム例 -->
<form action="/products" method="POST">
@csrf
<div class="mb-3">
<label class="form-label">商品名</label>
<input type="text" name="name" class="form-control">
</div>
<div class="mb-3">
<label class="form-label">説明</label>
<textarea name="description" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary">登録</button>
</form>
form-label
フォームの<label>に適切な余白とスタイルをつけるクラスです。form-controlとセットで使います。上の例に含まれています。
form-select
<select>（ドロップダウン）にform-controlと同様の整ったスタイルをつけます。
<select name="category" class="form-select">
<option value="food">食品</option>
<option value="electronics">電化製品</option>
</select>
【カテゴリ3】余白・テキスト系（6つ）
m-* / p-*（マージン・パディング）
要素の「外側の余白（margin）」と「内側の余白（padding）」を設定します。
額縁に絵を入れるとき、絵の周りに余白があると見栄えがいいですよね。mは「額縁と壁の間の距離」、pは「額縁の内側と絵の間の距離」です。
<!-- 書き方 -->
<!-- m-{数字} : 上下左右すべてにmargin -->
<!-- p-{数字} : 上下左右すべてにpadding -->
<!-- mt-{数字} : margin-top のみ（t=top） -->
<!-- mb-{数字} : margin-bottom のみ（b=bottom） -->
<!-- ms-{数字} : margin-left のみ（s=start） -->
<!-- me-{数字} : margin-right のみ（e=end） -->
<!-- 数字は0〜5（5が一番大きい余白） -->
<div class="mt-3 mb-3">上下に余白</div>
<div class="p-4">内側に余白</div>
<!-- よく使うパターン -->
<div class="mb-3"> <!-- フォームの各項目の間隔 -->
<label class="form-label">商品名</label>
<input type="text" class="form-control">
</div>
mb-3（下のmargin）は「フォームの入力欄の間隔を空ける」ために毎回使います。数字の意味は0.25remの倍数（0=0px、1=4px、2=8px、3=16px、4=24px、5=48px）です。
text-center / text-start / text-end
テキストの横位置を揃えます。
<h1 class="text-center">商品一覧</h1> <!-- 中央寄せ -->
<p class="text-start">左寄せ（デフォルト）</p>
<p class="text-end">右寄せ</p>
text-*（テキストカラー）
文字に色をつけます。
<p class="text-primary">青文字</p>
<p class="text-danger">赤文字（エラーなどに）</p>
<p class="text-success">緑文字（成功メッセージに）</p>
<p class="text-muted">グレー文字（補足説明に）</p>
<!-- Laravelのバリデーションエラー表示例 -->
@if ($errors->has('name'))
<p class="text-danger">{{ $errors->first('name') }}</p>
@endif
fw-bold / fs-*
文字の太さ（font-weight）とサイズ（font-size）を変更します。
<p class="fw-bold">太字テキスト</p>
<p class="fw-light">細字テキスト</p>
<!-- fs-1が最大（h1相当）、fs-6が最小 -->
<p class="fs-1">大きい文字</p>
<p class="fs-6">小さい文字</p>
【カテゴリ4】コンポーネント系（6つ）
card / card-body / card-title
情報をカード形式（枠線＋影のついた箱）で表示します。商品一覧ページで大活躍します。
名刺や商品タグのイメージです。1商品1カードで情報をまとめて表示します。
<!-- 商品カードの例 -->
<div class="card">
<div class="card-body">
<h5 class="card-title">りんご</h5>
<p class="card-text">甘くてジューシーなりんごです。</p>
<p class="card-text">¥200</p>
<a href="/products/1" class="btn btn-primary">詳細を見る</a>
</div>
</div>
table / table-striped / table-hover
<table>タグを見やすい表に整えます。
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>商品名</th>
<th>価格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
@foreach ($products as $product)
<tr>
<td>{{ $product->id }}</td>
<td>{{ $product->name }}</td>
<td>¥{{ $product->price }}</td>
<td>
<a href="/products/{{ $product->id }}/edit" class="btn btn-warning btn-sm">編集</a>
</td>
</tr>
@endforeach
</tbody>
</table>
alert / alert-*
通知・メッセージボックスを表示します。Laravelのフラッシュメッセージと組み合わせて使います。
「登録が完了しました」「エラーが発生しました」など、システムからのお知らせを目立つ形で表示します。工事現場の看板（緑=安全、赤=危険）のイメージです。
<!-- Laravelのフラッシュメッセージとの組み合わせ例 -->
@if (session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
@if (session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif
navbar 関連
サイト上部のナビゲーションバーを作ります。
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/">商品管理アプリ</a>
<div class="navbar-nav">
<a class="nav-link" href="/products">商品一覧</a>
<a class="nav-link" href="/products/create">商品登録</a>
</div>
</div>
</nav>
navbar-dark bg-dark：黒背景に白文字
navbar-light bg-light：白背景に黒文字
badge
小さなラベル（タグ）を表示します。在庫状態やカテゴリ表示に使えます。
<span class="badge bg-success">在庫あり</span>
<span class="badge bg-danger">在庫なし</span>
<span class="badge bg-secondary">食品</span>
list-group
リスト形式のUIを整えます。
<ul class="list-group">
<li class="list-group-item">りんご - ¥200</li>
<li class="list-group-item">バナナ - ¥150</li>
<li class="list-group-item">みかん - ¥100</li>
</ul>
【カテゴリ5】ユーティリティ系（2つ）
w-* / h-*（幅・高さ）
要素の幅・高さをパーセントで指定します。
<!-- 幅の指定（%単位） -->
<input type="text" class="form-control w-50"> <!-- 幅50% -->
<div class="w-100">幅100%（親要素いっぱい）</div>
<div class="w-75">幅75%</div>
d-none / d-block（表示・非表示）
要素を表示したり隠したりします。
<!-- 常に非表示 -->
<div class="d-none">見えない要素</div>
<!-- スマホだけ非表示（PCでは表示） -->
<div class="d-none d-md-block">PC専用コンテンツ</div>