form-check-inline

bootstrap5.css

bootstrap5.css
.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}
bootstrap5.css
.form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}
bootstrap5.css
.form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: 0.5em;
}

html bootstrap5 Sample

チェックボックスを横並びに変更する:form-check-inline


  <!-- 同じ水平行にあるチェックボックスやラジオをグループ化する -->
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="RadioOptions" id="Radio1" value="option1" />
    <label class="form-check-label" for="Radio1">1を選択</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="RadioOptions" id="Radio2" value="option2" />
    <label class="form-check-label" for="Radio2">2を選択</label>
  </div>

チェックボックスを無効にする:disabled


  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="RadioOptions" id="Radio3" value="option3" disabled />
    <label class="form-check-label" for="Radio3">3を選択 (disabled)</label>
  </div>