col-md-6

bootstrap5.css

bootstrap5.css
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.3333333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.6666666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.3333333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.6666666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.3333333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.6666666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.3333333333%;
  }
  .offset-md-2 {
    margin-left: 16.6666666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.3333333333%;
  }
  .offset-md-5 {
    margin-left: 41.6666666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.3333333333%;
  }
  .offset-md-8 {
    margin-left: 66.6666666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.3333333333%;
  }
  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}

html bootstrap5 Sample

rowとcolのオフセットのリセット:offset-md-0


col-sm-5とcol-md-6
col-sm-5とoffset-sm-2とcol-md-6とoffset-md-0
  <div class="row">
    <div class="col-sm-5 col-md-6">col-sm-5とcol-md-6</div>
    <!-- Medium以上でオフセットをクリア -->
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">col-sm-5とoffset-sm-2とcol-md-6offset-md-0</div>
  </div>

フォームレイアウトにrow:rowとmb-3とcol-md-6


  <!-- colとrowで自由自在にデザインを作っていく -->
  <div class="row">
    <div class="mb-3 col-md-6">
      <label for="inputEmail">メールアドレス</label>
      <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
    </div>
    <div class="mb-3 col-md-6">
      <label for="inputPassword">パスワード</label>
      <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
    </div>
  </div>
  <div class="row">
    <div class="mb-3 col-md-4">
      <label for="inputState">国</label>
      <select id="inputState" class="form-select">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="mb-3 col-md-2">
      <label for="inputZip">郵便番号</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
    <div class="mb-3 col-md-6">
      <label for="inputCity">都道府県</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
  </div>
  <div class="mb-3">
    <label for="inputAddress1">住所1</label>
    <input type="text" class="form-control" id="inputAddress1" placeholder="市町村">
  </div>
  <div class="mb-3">
    <label for="inputAddress2">住所2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="マンション名">
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="check">
      <label class="form-check-label" for="check">チェックする</label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">サインイン</button>

クライアント側で入力検証を行う場合:required


姓を入力してください
名を入力してください
市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください
  <form class="row g-3">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">姓</label>
      <!-- requiredは必須-->
      <input type="text" class="form-control" id="validationServer01" placeholder="First name" value="山田" required>
      <div class="invalid-feedback">姓を入力してください</div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">名</label>
      <input type="text" class="form-control" id="validationServer02" placeholder="Last name" value="太郎" required>
      <div class="invalid-feedback">名を入力してください</div>
    </div>
    </div>
    <div class="form">
      <div class="col-md-6 mb-3">
        <label for="validationServer03">市町村</label>
        <input type="text" class="form-control" id="validationServer03" placeholder="市町村名を入力" required>
        <div class="invalid-feedback">市町村名を入力してください</div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationServer04">都道府県</label>
        <input type="text" class="form-control" id="validationServer04" placeholder="都道府県名を入力" required>
        <div class="invalid-feedback">都道府県名を入力してください</div>
      </div>
      <div class="col-md-3 mb-3">
        <label for="validationServer05">郵便番号</label>
        <input type="text" class="form-control" id="validationServer05" placeholder="郵便番号を入力" required>
        <div class="invalid-feedback">郵便番号を入力してください</div>
      </div>
    </div>
    <button class="btn btn-primary" type="submit">送信する</button>
  </form>

サーバー側で入力検証を行う場合:is-valid


市町村名を入力してください
都道府県名を入力してください
郵便番号を入力してください
  <div class="form">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">姓</label>
      <!-- is-valid はチェックマークが付く-->
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="山田"
        required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">名</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="太郎"
        required>
    </div>
  </div>
  <div class="form">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">市町村</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="市町村名を入力" required>
      <div class="invalid-feedback">市町村名を入力してください</div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">都道府県</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="都道府県名を入力" required>
      <div class="invalid-feedback">都道府県名を入力してください</div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">郵便番号</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="郵便番号を入力" required>
      <div class="invalid-feedback">郵便番号を入力してください</div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">送信する</button>