목차

Bootstrap Form groups & Input group

  • description : Bootstrap Form groups & Input group
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2023-01-30 Mon


Form groups

The .form-group class is the easiest way to add some structure to forms.
It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging.
By default it only applies margin-bottom, but it picks up additional styles in .form-inline as needed.
Use it with <fieldset>s,

s, or nearly any other element.

.form-group 클래스는 forms에 일부 구조를 추가하는 가장 쉬운 방법입니다.
.form-group 클래스는 labels, controls, optional help text(선택적 도움말 텍스트) 및 form 유효성 메시지에 대해 적합한 그룹화를 하는 flexible 클래스를 제공합니다.
.form-group 클래스는 기본으로 margin-bottom만 적용되지만, 필요에 따라 .form-inline에서 추가 스타일을 선택합니다.
<fieldset>, <div> 또는 거의 모든 다른 요소들과 .form-group 클래스를 사용하세요.

    <form>
        <div class="form-group">
          <label for="formGroupExampleInput">Example label</label>
          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
        </div>
        <div class="form-group">
          <label for="formGroupExampleInput2">Another label</label>
          <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
        </div>
      </form>


form-group basic example

Inline forms

Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.
Form controls within inline forms vary slightly from their default states.

.form-inline 클래스를 사용하여, 단 하나의 수평선에 일련의 labels, form controls, 그리고 buttons을 표시합니다.
인라인 form 내부의 Form controls는 Form controls의 기본 상태와 약간 상이합니다.

Form groups
Input group
Inline forms