Text Box
Documentation and examples of a simple text box that is the main and most commonly used form control.
Basic Example #
Example
<input type="text" placeholder="Text Box" class="form-control" />
Sizing #
Set heights using classes like
.form-control-lg
and
.form-control-sm
.
Example
<input type="text" placeholder="Large" class="form-control form-control-lg" /><input
type="text"
placeholder="Normal"
class="form-control mt-3"
/><input type="text" placeholder="Small" class="form-control mt-3 form-control-sm" />
States #
A text field can be in several different states. Below you can see a demo of these states:
Example
<input type="text" placeholder="Normal" class="form-control" /><input
type="text"
placeholder="Readonly"
readonly=""
class="form-control mt-3"
/><input type="text" placeholder="Disabled" disabled="" class="form-control mt-3" /><input
type="text"
placeholder="Valid"
class="form-control is-valid mt-3"
/><input type="text" placeholder="Invalid" class="form-control is-invalid mt-3" />