Form Control

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

Form Controls on Bootstrap

Example

<div class="mb-3">
  <label class="form-label" for="exampleFormControlInput1">Email address </label>
  <input class="form-control" id="exampleFormControlInput1" type="date" placeholder="name@example.com" />
</div>
<div class="mb-0">
  <label class="form-label" for="exampleTextarea">Example Textarea </label>
  <textarea class="form-control" id="exampleTextarea" rows="3"> </textarea>
</div>

Sizing

<div class="mb-3">
  <input class="form-control form-control-lg" id="sizingInputLg" type="text" placeholder=".form-control-lg" />
</div>
<div class="mb-3">
  <input class="form-control form-control" id="sizingInput" type="text" placeholder=".form-control" />
</div>
<div class="mb-0">
  <input class="form-control form-control-sm" id="sizingInputSm" type="text" placeholder=".form-control-sm" />
</div>

Readonly plain text

<div class="mb-3 row">
  <label class="col-sm-2 col-form-label" for="staticEmail">Email</label>
  <div class="col-sm-10">
    <input class="form-control-plaintext outline-none" id="staticEmail" type="text" readonly="" value="email@example.com" />
    <div class="mb-3 row"> </div>
  </div>
  <label class="col-sm-2 col-form-label" for="inputPassword">Password</label>
  <div class="col-sm-10">
    <input class="form-control" id="inputPassword" type="password" />
  </div>
</div>

File Input

<div class="mb-3">
  <label class="form-label" for="customFile">File input example</label>
  <input class="form-control" id="customFile" type="file" />
</div>
<div class="mb-3">
  <label class="form-label" for="formFileDisabled">Disabled file input example</label>
  <input class="form-control" id="formFileDisabled" type="file" disabled="disabled" />
</div>
<div class="mb-3">
  <label class="form-label" for="formFileMultiple">Multiple files input example</label>
  <input class="form-control" id="formFileMultiple" type="file" multiple="multiple" />
</div>

File Input Sizing

<div class="mb-3">
  <label class="form-label" for="customFileSm">Small file input example</label>
  <input class="form-control form-control-sm" id="customFileSm" type="file" />
</div>
<div class="mb-3">
  <label class="form-label" for="customFileLg">Large file input example</label>
  <input class="form-control form-control-lg" id="customFileLg" type="file" />
</div>
On this page