Control

Form Control

Default input

<input type="text" class="form-control" placeholder="name@example.com"/>

Form Labels

Use .requiredclass with .form-labelor any custom element to indicate input's mandatory status:

Example

<div class="mb-10">
<label for="exampleFormControlInput1" class="required form-label">Example</label>
<input type="email" class="form-control" placeholder="Example input"/>
</div>

Form Select

Use .form-select-solidclass with .form-selectto set solid background style for a form select:

Default select

<select class="form-select" aria-label="Select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

Form Range

Use .form-rangeclass with .form-selectto set solid background style for a form select:

Example range

Disabled range

<div class="mb-10">
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1" />
</div>

<div class="mb-10">
<label for="customRange1" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="customRange1"disabled />
</div>