Form Control
Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.
Example
<div class="mb-3">
<label class="form-label" for="exampleFormControlInput">Email address </label>
<input class="form-control" id="exampleFormControlInput" type="email" placeholder="[email protected]" />
</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 protected]" />
<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>