決まった型に流し込んで速く出す

<!-- container が左右の余白と最大幅、row が横並び、col-* が幅を担当する。
     この3階層は崩さない。row の直下は必ず col-* にする。 -->
<div class="container">
  <!-- g-3 は列同士の隙間（gutter）。row 側に付ける。 -->
  <div class="row g-3 demo-col">
    <!-- 既定（col-12）は縦積み。md（768px）以上で 6/12 = 半分、
         lg（992px）以上で 4/12 = 3列。指定しない画面幅は
         直前の指定を引き継ぐので、小さいほうから書く。 -->
    <div class="col-12 col-md-6 col-lg-4"><div>col-12 / md-6 / lg-4</div></div>
    <div class="col-12 col-md-6 col-lg-4"><div>col-12 / md-6 / lg-4</div></div>
    <div class="col-12 col-md-12 col-lg-4"><div>col-12 / md-12 / lg-4</div></div>
  </div>

  <!-- 数字を書かない col は「残りを均等に分け合う」。
       3つ並べれば自動で 4:4:4 になる。 -->
  <div class="row g-3 demo-col mt-3">
    <div class="col"><div>col</div></div>
    <div class="col"><div>col</div></div>
    <div class="col"><div>col</div></div>
  </div>

  <!-- col-auto は中身の幅ぶんだけ。残りを col が吸う。
       ラベルと入力欄のように「片方だけ固定」したいときに使う。 -->
  <div class="row g-3 demo-col mt-3 align-items-center">
    <div class="col-auto"><div>col-auto</div></div>
    <div class="col"><div>col（残り全部）</div></div>
  </div>

  <!-- offset で空きを作る。offset-md-3 + col-md-6 で中央寄せ。 -->
  <div class="row g-3 demo-col mt-3">
    <div class="col-md-6 offset-md-3"><div>col-md-6 offset-md-3</div></div>
  </div>

  <!-- order で見た目の順序だけ入れ替える。HTMLの順序（＝読み上げ順）は
       変えないので、重要な内容を先に書いたまま右に置ける。 -->
  <div class="row g-3 demo-col mt-3">
    <div class="col-md-8 order-md-2"><div>HTMLでは1番目 / 表示は2番目</div></div>
    <div class="col-md-4 order-md-1"><div>HTMLでは2番目 / 表示は1番目</div></div>
  </div>
</div>

<!-- row-cols-* は「1行に何列並べるか」を直接指定する書き方。
     col-md-4 と同じ結果になるが、列数のほうが意図が読みやすい。 -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
  <div class="col">
    <!-- h-100 で高さを揃える。カードの中身の量が違っても、
         並んだカードの下端が揃う。Bootstrapで最も使う小技。 -->
    <div class="card h-100 shadow-sm border-0">
      <div class="shot"></div>
      <div class="card-body d-flex flex-column">
        <!-- d-flex + gap-2 で横並び。mb-2 は下の余白（0.5rem）。
             余白は 0〜5 の6段階しかない。刻みを決めなくていいのが利点。 -->
        <div class="d-flex gap-2 mb-2">
          <span class="badge text-bg-primary">新着</span>
          <span class="badge text-bg-light border">無料</span>
        </div>
        <h2 class="card-title h6">クラス名だけで形が決まる</h2>
        <p class="card-text small text-body-secondary">
          カードの枠線・角丸・内側の余白は、あらかじめ決められています。設計せずに済むぶん速く出せます。
        </p>
        <!-- mt-auto で、中身の量に関わらずボタンを下端に寄せる。
             親に d-flex flex-column が要る。 -->
        <a href="#" class="btn btn-primary btn-sm mt-auto align-self-start">詳しく見る</a>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card h-100 shadow-sm border-0">
      <div class="shot shot-b"></div>
      <div class="card-body d-flex flex-column">
        <div class="d-flex gap-2 mb-2">
          <span class="badge text-bg-danger">残りわずか</span>
        </div>
        <h2 class="card-title h6">中身の量が違っても下端が揃う</h2>
        <p class="card-text small text-body-secondary">
          このカードは説明文が短いですが、h-100 と mt-auto のおかげでボタンの位置は隣と揃います。
        </p>
        <a href="#" class="btn btn-primary btn-sm mt-auto align-self-start">詳しく見る</a>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card h-100 shadow-sm border-0">
      <div class="shot shot-c"></div>
      <div class="card-body d-flex flex-column">
        <div class="d-flex gap-2 mb-2">
          <span class="badge text-bg-success">対応済み</span>
          <span class="badge text-bg-light border">CC0</span>
        </div>
        <h2 class="card-title h6">色の名前は6種類に決まっている</h2>
        <p class="card-text small text-body-secondary">
          primary / secondary / success / danger / warning / info。この語彙で色を指定するので、配色を毎回決め直す必要がありません。
        </p>
        <a href="#" class="btn btn-primary btn-sm mt-auto align-self-start">詳しく見る</a>
      </div>
    </div>
  </div>
</div>

<!-- list-group は区切り線つきの縦並び。
     list-group-flush で外枠を消すと、カードの中に自然に収まる。 -->
<div class="card mt-4 shadow-sm border-0">
  <div class="card-header bg-transparent fw-semibold">直近の更新</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span class="small">サンプルを4件追加</span>
      <span class="badge text-bg-secondary rounded-pill">09/01</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span class="small">フォームの検証表示を修正</span>
      <span class="badge text-bg-secondary rounded-pill">08/31</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      <span class="small">ナビバーの折りたたみを調整</span>
      <span class="badge text-bg-secondary rounded-pill">08/28</span>
    </li>
  </ul>
</div>

/* Bootstrap の既定は欧文前提で、見出しの line-height が 1.2 しかない。
   和文をこの行間で組むと、2行目以降が前の行に食い込んで読みにくい。
   5.3 は主要な値を CSS変数で持っているので、クラスを上書きせず
   変数を差し替えるだけで直る。詳細度の戦いにならない。 */
:root {
  --bs-body-font-family: "Inter", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
    "Yu Gothic", "Meiryo", sans-serif;
  --bs-body-line-height: 1.8;
  /* 和文では字間を詰めない。0 が既定だが、意図を残すために明示する。 */
  letter-spacing: 0;
}

/* 見出しの行間には変数が用意されていないので直接指定する。
   Bootstrap は h1〜h6 だけでなく .h1〜.h6 のユーティリティクラスにも
   同じ 1.2 を当てている。要素セレクタ（詳細度 0,0,1）だけでは
   クラス（0,1,0）に負けるので、両方を並べて書く必要がある。
   詳細度が同じなら、あとに書いたこちらが勝つ。 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.5; }

<!-- novalidate でブラウザ既定の吹き出しを止め、表示は Bootstrap に任せる。
     判定そのものは checkValidity() で標準の検証をそのまま使う。
     required / type / pattern を書くだけで済み、自前の判定を書かない。 -->
<form class="card shadow-sm border-0 p-4 needs-validation" novalidate>
  <div class="mb-3">
    <!-- label は for と id で必ず結ぶ。これを省くと
         ラベルを押しても入力欄に飛ばず、読み上げも壊れる。 -->
    <label for="name" class="form-label">お名前</label>
    <input type="text" class="form-control" id="name" name="name"
           autocomplete="name" required />
    <!-- invalid-feedback は既定で非表示。親フォームに was-validated が
         付き、かつこの入力が :invalid のときだけ現れる。 -->
    <div class="invalid-feedback">お名前を入力してください。</div>
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="email" name="email"
           autocomplete="email" required />
    <div class="form-text">確認のご連絡にのみ使います。</div>
    <div class="invalid-feedback">メールアドレスの形式で入力してください。</div>
  </div>

  <div class="mb-3">
    <label for="plan" class="form-label">ご検討中のプラン</label>
    <select class="form-select" id="plan" name="plan" required>
      <option value="">選択してください</option>
      <option>フリー</option>
      <option>スタンダード</option>
      <option>エンタープライズ</option>
    </select>
    <div class="invalid-feedback">プランを選択してください。</div>
  </div>

  <div class="mb-3">
    <label for="body" class="form-label">お問い合わせ内容</label>
    <textarea class="form-control" id="body" name="body" rows="4" required></textarea>
    <div class="invalid-feedback">内容を入力してください。</div>
  </div>

  <div class="form-check mb-4">
    <input class="form-check-input" type="checkbox" id="agree" required />
    <label class="form-check-label" for="agree">
      利用規約に同意します
    </label>
    <div class="invalid-feedback">同意が必要です。</div>
  </div>

  <button class="btn btn-primary" type="submit">送信する</button>

  <div class="alert alert-success mt-3 mb-0 d-none" id="done" role="status">
    送信しました。折り返しご連絡します。
  </div>
</form>

// Bootstrap の検証表示は「was-validated を付けるかどうか」だけで切り替わる。
// 判定は checkValidity()、つまりブラウザ標準。自前の正規表現は書かない。
const form = document.querySelector(".needs-validation");
const done = document.getElementById("done");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  // was-validated を付けた時点で、:valid / :invalid に応じた
  // 緑・赤の表示と invalid-feedback の出し分けが始まる。
  form.classList.add("was-validated");

  if (!form.checkValidity()) {
    // 最初の不正な入力へフォーカスを移す。これが無いと、
    // 長いフォームでどこが悪いのか探すことになる。
    form.querySelector(":invalid")?.focus();
    done.classList.add("d-none");
    return;
  }

  done.classList.remove("d-none");
});

// やり直すときは was-validated を外す。付けっぱなしにすると、
// 入力し直している最中ずっと赤いままになる。
form.addEventListener("reset", () => {
  form.classList.remove("was-validated");
  done.classList.add("d-none");
});

<!-- navbar-expand-md は「md 以上で横並び、それ未満はハンバーガー」。
     この1クラスで折りたたみの境界が決まる。 -->
<nav class="navbar navbar-expand-md bg-body-tertiary border-bottom">
  <div class="container">
    <a class="navbar-brand fw-semibold" href="#">Vibehaus</a>

    <!-- data-bs-toggle と data-bs-target で開閉を宣言する。
         JavaScript は本体を読み込むだけで、自分では1行も書かない。
         aria-controls / aria-expanded / aria-label は必須。
         省くとキーボードと読み上げで何が起きたのか伝わらない。 -->
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#nav"
            aria-controls="nav" aria-expanded="false" aria-label="メニューを開閉">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="nav">
      <ul class="navbar-nav me-auto mb-2 mb-md-0">
        <li class="nav-item">
          <!-- aria-current="page" が現在地。active クラスは見た目だけなので、
               これが無いと読み上げ利用者に現在地が伝わらない。 -->
          <a class="nav-link active" aria-current="page" href="#">ホーム</a>
        </li>
        <li class="nav-item"><a class="nav-link" href="#">デザイン例</a></li>

        <!-- ドロップダウンは Popper が要る。だから bootstrap.js ではなく
             bootstrap.bundle.js（Popper 同梱）を読む。 -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button"
             data-bs-toggle="dropdown" aria-expanded="false">技術別</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Bootstrap</a></li>
            <li><a class="dropdown-item" href="#">Tailwind CSS</a></li>
            <li><hr class="dropdown-divider" /></li>
            <li><a class="dropdown-item" href="#">すべて見る</a></li>
          </ul>
        </li>
      </ul>

      <!-- モーダルも同じ宣言だけで開く。閉じる操作・背面の不活性化・
           フォーカスの閉じ込めは Bootstrap 側が面倒を見る。 -->
      <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#ask">
        お問い合わせ
      </button>
    </div>
  </div>
</nav>

<div class="modal fade" id="ask" tabindex="-1" aria-labelledby="ask-title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="ask-title">お問い合わせ</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0 small text-body-secondary">
          このモーダルもクラスと data 属性だけで動いています。Escキーでも背景クリックでも閉じます。
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>