수평 폼
분류: 서식
기본 폼과 같은 입력 항목들을 라벨과 입력란을 좌우로 나란히 배치하는 방식으로 바꾼 예제입니다. 각 항목을 .row로 감싸고 라벨에 col-3 col-form-label, 입력 영역에 col을 적용해 라벨 너비를 고정한 채 입력란이 남은 공간을 채우도록 만듭니다. 항목 수가 많고 라벨 폭을 통일해 정렬된 느낌을 주고 싶을 때 적합합니다.
소스
<div class="card overflow-auto">
<div class="card-status-top bg-dark-overlay"></div>
<div class="card-header">
<h3 class="card-title">수평 폼</h3>
</div>
<div class="card-body">
<div class="mb-3 row">
<label class="col-3 col-form-label required">이메일 주소</label>
<div class="col">
<input type="email" class="form-control" aria-describedby="emailHelp" placeholder="이메일 입력">
<small class="form-hint">귀하의 이메일은 다른 사람과 절대 공유하지 않습니다.</small>
</div>
</div>
<div class="mb-3 row">
<label class="col-3 col-form-label required">비밀번호</label>
<div class="col">
<input type="password" class="form-control" placeholder="비밀번호">
<small class="form-hint">
비밀번호는 8-20자 길이여야 하며, 문자와 숫자를 포함하고
공백, 특수 문자 또는 이모티콘을 포함해서는 안 됩니다.
</small>
</div>
</div>
<div class="mb-3 row">
<label class="col-3 col-form-label">선택</label>
<div class="col">
<select class="form-select">
<option>옵션 1</option>
<optgroup label="옵션그룹 1">
<option>옵션 1</option>
<option>옵션 2</option>
</optgroup>
<option>옵션 2</option>
<optgroup label="옵션그룹 2">
<option>옵션 1</option>
<option>옵션 2</option>
</optgroup>
<optgroup label="옵션그룹 3">
<option>옵션 1</option>
<option>옵션 2</option>
</optgroup>
<option>옵션 3</option>
<option>옵션 4</option>
</select>
</div>
</div>
<div class="row">
<label class="col-3 col-form-label pt-0">체크박스</label>
<div class="col">
<label class="form-check">
<input class="form-check-input" type="checkbox" checked="">
<span class="form-check-label">옵션 1</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox">
<span class="form-check-label">옵션 2</span>
</label>
<label class="form-check">
<input class="form-check-input" type="checkbox" disabled="">
<span class="form-check-label">옵션 3</span>
</label>
</div>
</div>
</div>
<div class="card-footer text-end">
<button type="submit" class="btn btn-primary">제출</button>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역 할 |
|---|---|
row | 라벨과 입력 영역을 가로로 배치하는 Bootstrap 그리드 행 |
col-3 | 라벨 열의 너비를 12분의 3(25%)으로 고정 |
col-form-label | 그리드 안에서 입력 컨트롤과 수직 정렬이 맞도록 조정된 라벨 스타일 |
col | 입력 영역이 남은 너비를 모두 차지하도록 지정 |
required | col-form-label과 함께 사용해 필수 입력 항목임을 표시 |
form-control | 텍스트·비밀번호 입력 필드의 기본 스타일 |
form-hint | 입력란 아래에 작게 표시하는 보조 설명 텍스트 |
form-select | 드롭다운(<select>)의 기본 스타일 |
form-check form-check-input form-check-label | 체크박스와 라벨을 묶는 래퍼, 체크박스 자체 스타일, 라벨 텍스트 스타일 |
pt-0 | 체크박스 줄 라벨의 위쪽 여백을 제거해 첫 번째 체크박스와 높이를 맞춤 |
mb-3 | 각 폼 그룹 사이의 아래쪽 여백(margin-bottom) |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/서식-수평-폼.html 경로에서 렌더링 결과를 확인할 수 있습니다.