Skip to main content

Form control

Give textual form controls like <input> and <textarea> styling and focus states with .form-control.

Example

<div class="row g-3">
  <div class="col-md-6">
    <label for="defaultInput" class="form-label">Default input</label>
    <input type="text" class="form-control" id="defaultInput">
  </div>
  <div class="col-md-6">
    <label for="placeholderInput" class="form-label">Placeholder</label>
    <input type="text" class="form-control" id="placeholderInput" placeholder="name@example.com">
  </div>
  <div class="col-md-6">
    <label for="disabledInput" class="form-label">Disabled</label>
    <input type="text" class="form-control" id="disabledInput" disabled>
  </div>
  <div class="col-md-6">
    <label for="readonlyInput" class="form-label">Readonly</label>
    <input type="text" class="form-control" id="readonlyInput" readonly value="Readonly">
  </div>
  <div class="col-12">
    <label for="exampleTextarea" class="form-label">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>
</div>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

<input class="form-control form-control-lg mb-2" type="text" id="inputLarge" name="inputLarge" placeholder=".form-control-lg">
<input class="form-control mb-2" type="text" id="inputDefault" name="inputDefault" placeholder="Default input">
<input class="form-control form-control-sm mb-2" type="text" id="inputSmall" name="inputSmall" placeholder=".form-control-sm">

Password / text buttons

Fewer CSS is needed for these; pair inputs with .input-group for prepended buttons (see Input group).

File input

File inputs are fully styled out of the box, with a hover state for the "select file" button.

<div class="w-50">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>

Color

<div class="d-flex align-items-center gap-3">
  <label for="formColor" class="form-label mb-0">Color picker</label>
  <input type="color" class="form-control form-control-color" id="formColor" value="#7c3aed" title="Choose a color">
</div>

Plain text

Use .form-control-plaintext to strip the input chrome while keeping the layout:

<div class="row g-2 align-items-center">
  <label class="col-sm-3 col-form-label" for="staticEmail">Email</label>
  <div class="col-sm-9">
    <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
  </div>
</div>