Input

Default

Use .form-control to style native input elements.

<input class="form-control" name="textInput" placeholder="some text" />

With label

Use .form-label together with .form-control to create a labeled input.

<div>
	<label class="form-label" for="inputWithLabel">Input label</label>
	<input class="form-control" id="inputWithLabel" name="inputWithLabel" placeholder="some text" />
</div>

Required

Use .is-required on the label to visually mark required fields.

<div>
	<label class="form-label is-required" for="requiredInput">Required input</label>
	<input class="form-control" id="requiredInput" name="requiredInput" required placeholder="required text" />
</div>

Input types

The .form-control class can be used with different input types.

<input class="form-control" type="text" placeholder="Text input" />
<input class="form-control" type="email" placeholder="name@example.com" />
<input class="form-control" type="password" placeholder="Password" />
<input class="form-control" type="date" />

Textarea

Use .form-control with textarea elements for multiline text input.

<div>
	<label class="form-label" for="textareaExample">Message</label>
	<textarea class="form-control" id="textareaExample" name="textareaExample" placeholder="Your message"></textarea>
</div>

Invalid

Use .is-invalid to style an invalid input and show the related feedback message.

<div>
	<label class="form-label" for="invalidInput">Input label</label>
	<input class="form-control is-invalid" id="invalidInput" name="invalidInput" placeholder="some text" />
	<div class="invalid-feedback">Please enter a valid text.</div>
</div>

Disabled

Use the native disabled attribute to disable an input.

<div>
	<label class="form-label" for="disabledInput">Disabled input</label>
	<input class="form-control" id="disabledInput" name="disabledInput" disabled value="some value" />
</div>