[개발] 체크박스를 옆으로 배치하는 방법

Bootstrap에서는 select와 checkbox를 옆으로 배치하려면 Flexbox 유틸리티 클래스나 form-inline 스타일을 활용하면 됩니다. 간단한 예시를 보여드릴게요:

 <div class="d-flex align-items-center">
  <select class="form-select me-2">
    <option>옵션 1</option>
    <option>옵션 2</option>
  </select>

  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="check1">
    <label class="form-check-label" for="check1">
      체크박스
    </label>
  </div>
</div>

설명

• d-flex: Flexbox 레이아웃을 적용해서 가로 배치가 가능하게 합니다.
• align-items-center: 수직 가운데 정렬.
• me-2: 오른쪽 여백(margin-end)을 줘서 select와 checkbox 사이 간격을 확보합니다.
• form-select: Bootstrap의 select 스타일.
• form-check: 체크박스 컨테이너.

👉 만약 여러 개를 한 줄에 배치하고 싶다면 d-flex flex-row 또는 form-inline을 사용할 수 있습니다.