레이아웃

레이아웃 (Layout)

인라인에서 수평, 커스텀 그리드 구현까지 폼 레이아웃 옵션으로 폼에 구조를 부여해 보아요.

출처: 문서

본문

폼 (Forms)

모든 폼 필드 그룹은 <form> 요소 안에 있어야 해요. Bootstrap은 <form> 요소에 기본 스타일을 제공하지 않지만, 기본적으로 제공되는 강력한 브라우저 기능이 몇 가지 있어요.

• 브라우저 폼이 처음이라면? MDN 폼 문서에서 개요와 사용 가능한 속성의 전체 목록을 검토해 보세요.
• <form> 안의 <button>은 기본적으로 type="submit"이므로, 구체적으로 지정하고 항상 type을 포함하려고 노력해야 해요.

Bootstrap은 거의 모든 폼 컨트롤에 display: block과 width: 100%를 적용하므로, 폼은 기본적으로 세로로 쌓이게 돼요. 추가 클래스를 사용해 폼별로 이 레이아웃을 다르게 조정할 수 있어요.

유틸리티 (Utilities)

마진 유틸리티는 폼에 구조를 추가하는 가장 쉬운 방법이에요. 라벨, 컨트롤, 선택적인 폼 텍스트, 폼 검증 메시지의 기본 그룹화를 제공해요. margin-bottom 유틸리티를 고수하고, 일관성을 위해 폼 전체에서 단일 방향을 사용하는 것을 권장해요.

<fieldset>, <div>, 거의 모든 다른 요소와 함께 원하는 대로 폼을 자유롭게 구축해 보세요.

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

폼 그리드 (Form grid)

그리드 클래스를 사용해 더 복잡한 폼을 만들 수 있어요. 여러 컬럼, 다양한 너비, 추가 정렬 옵션이 필요한 폼 레이아웃에 사용하세요. $enable-grid-classes Sass 변수가 활성화되어 있어야 해요 (기본적으로 켜져 있음).

<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

거터 (Gutters)

거터 수정자 클래스를 추가하면 인라인 및 블록 방향 모두에서 거터 너비를 제어할 수 있어요. 역시 $enable-grid-classes Sass 변수가 활성화되어 있어야 해요 (기본적으로 켜져 있음).

<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

그리드 시스템으로 더 복잡한 레이아웃도 만들 수 있어요.

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

수평 폼 (Horizontal form)

폼 그룹에 .row 클래스를 추가하고 .col-*-* 클래스를 사용해 라벨과 컨트롤의 너비를 지정하면 그리드로 수평 폼을 만들 수 있어요. <label>에 .col-form-label도 추가해서 연결된 폼 컨트롤과 세로로 가운데 정렬되도록 해야 해요.

때로는 완벽한 정렬을 위해 마진이나 패딩 유틸리티를 사용해야 할 수도 있어요. 예를 들어 우리는 쌓인(stacked) 라디오 입력 라벨의 padding-top을 제거해서 텍스트 기준선을 더 잘 정렬했어요.

<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

수평 폼 라벨 크기 조절 (Horizontal form label sizing)

.form-control-lg와 .form-control-sm의 크기를 올바르게 따라가도록 <label>이나 <legend>에 .col-form-label-sm 또는 .col-form-label-lg를 사용해야 해요.

<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  </div>
</div>
<div class="row mb-3">
  <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  </div>
</div>
<div class="row">
  <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
  </div>
</div>

컬럼 크기 조절 (Column sizing)

이전 예시에서 보여줬듯이 우리 그리드 시스템은 .row 안에 원하는 만큼의 .col을 배치할 수 있어요. 그들은 사용 가능한 너비를 동일하게 분할해요. 특정 컬럼 클래스(예: .col-sm-7)로 컬럼의 일부가 더 많거나 적은 공간을 차지하게 하고, 나머지 .col이 나머지를 동일하게 분할하도록 할 수도 있어요.

<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="City" aria-label="City">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="State" aria-label="State">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
  </div>
</div>

자동 크기 조절 (Auto-sizing)

아래 예시는 flexbox 유틸리티를 사용해 내용을 세로로 가운데 정렬하고 .col을 .col-auto로 변경해서 컬럼이 필요한 공간만 차지하도록 해요. 다시 말해, 컬럼 크기는 내용에 따라 스스로 조절돼요.

<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck">
      <label class="form-check-label" for="autoSizingCheck">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

그다음 이를 크기별 컬럼 클래스와 다시 혼합할 수 있어요.

<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
      <label class="form-check-label" for="autoSizingCheck2">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

인라인 폼 (Inline forms)

.row-cols-* 클래스를 사용해 반응형 수평 레이아웃을 만들어요. 거터 수정자 클래스를 추가하면 가로와 세로 방향 모두에 거터가 생겨요. 좁은 모바일 뷰포트에서는 .col-12가 폼 컨트롤 등을 쌓는 데 도움을 줘요. .align-items-center는 폼 요소를 가운데로 정렬해서 .form-check가 제대로 정렬되게 해요.

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

더 알아보기 (Learn more)

• Bootstrap 문서