bootstrap 5 form 관련 정리

bootstrap 5 form 관련 정리 updated_at: 2024-07-31 15:30

v5

form 관련 클래스 및 특징

bootstrap에서는 form 관련 다양한 클래스를 제공한다.
비슷한 클래스 이지만 사용법에 따라 정렬등이 달라 헷갈리는 경우가 많은 데 그런 부분들을 한 번 정리하고 넘어 가보자

input-group vs row

form-group @deprecated

form-group 은 v5에서는 더이상 사용되지 않는다.

input-group을 사용하여 inline 시키기

<div class="input-group">
  <label for='name' class='col-sm-2 col-form-label'>텍스트박스</label>
  <input type="text" class="form-control" value="">
</div>

input-group sizing

<div class="input-group">
<div class="input-group input-group-sm">
<div class="input-group input-group-lg">

input-group-text

input-group 사용시 텍스트를 붙일 때 사용

<span class="input-group-text"><i class="fa fa-unlock"></i></span>

row 를 사용하여 inline 시키기

.align-items-center 와 함께 .row를 실행시키면 관련 element의 쉽게 인라인 정렬할 수 있다.

<div class="row">
  <label class='col-sm-2'>텍스트박스</label>
  <div class='col-sm-10'>
    <input type="text" class="form-control" value="">
  </div>
</div>

form-controll (input, textarea)

input, textarea 사용
form-controll은 form-control-sm, form-control-lg 등과 함께 사이즈를 변경할 수 있다.

<input type="email" class="form-control form-control-sm">
<input type="email" class="form-control">
<input type="email" class="form-control form-control-lg">

form-selec (select)

form-select-lg 나 orm-select-sm 을 이용하여 사이즈 변경이 가능하다.

<select class="form-select">....</select>
<select class="form-select form-select-lg">....</select>
<select class="form-select form-select-sm">....</select>

<select class="form-select" multiple >....</select>

form-check (checks and radios)

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

form-check inline

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>

label

form-label

form-label은 form-control 이나 form-select 처럼 단순하게 label 을 표시합니다.

<label class="form-label">Email address</label>

form-check-label

form-check 와 같이 사용하는 label 입니다.

col-form-label

col- 이 붙으면 너비 지정이 가능하며, 연관된 폼 컨트롤과 함께 수직으로 가운데 정렬되도록 합니다. 또한 -lg, -sm 과 함께 사이즈변경 가능합니다.

<label class="col-sm-2 col-form-label">nomal size</label>
<label class="col-sm-2 col-form-label col-form-label-lg">big size</label>
<label class="col-sm-2 col-form-label col-form-label-sm">small size</label>

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>