Form Controls
Form Control
<!-- Default input -->
<div class="mb-10">
<label class="form-label">Default input</label>
<input type="email" class="form-control" placeholder="name@example.com" autocomplete="email">
</div>
<!-- Solid background style -->
<div class="mb-10">
<label class="form-label">Solid background style</label>
<input type="text" class="form-control form-control-solid" placeholder="name@example.com">
</div>
<!-- Transparent background style -->
<div class="mb-0">
<label class="form-label">Transparent background style</label>
<input type="text" class="form-control form-control-transparent" placeholder="name@example.com">
</div>
Flush Form Control
<!-- Flush form control -->
<div class="mb-0">
<label for="exampleFormControlInput1" class="form-label">Example</label>
<input type="email" class="form-control form-control-flush" placeholder="Example input">
</div>
Form Labels
<!-- Symbol in label -->
<div class="mb-10">
<label for="exampleFormControlInput1" class="required form-label">Symbol in label</label>
<input type="email" class="form-control form-control-solid" placeholder="Example input">
</div>
<!-- Symbol in input -->
<div>
<label for="exampleFormControlInput1" class="form-label">Symbol in input</label>
<div class="position-relative">
<div class="required position-absolute top-0"></div>
<input type="email" class="form-control form-control-solid" placeholder="Example input">
</div>
</div>
Form Selects
<!-- Default select -->
<div class="mb-10">
<label for="exampleFormControlInput1" class="form-label">Default select</label>
<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>
</div>
<!-- Solid background style -->
<div class="mb-10">
<label for="exampleFormControlInput1" class="form-label">Solid background style</label>
<select class="form-select form-select-solid" 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>
</div>
<!-- Transparent background style -->
<div>
<label for="exampleFormControlTextarea1" class="form-label">Transparent background style</label>
<select class="form-select form-select-transparent" 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>
</div>
Form Control File
<!-- Default form control file -->
<div class="mb-10">
<label for="exampleFormControlFileInput1" class="form-label">Default form control file</label>
<input type="file" id="exampleFormControlFileInput1" class="form-control">
</div>
<!-- Solid background style -->
<div class="mb-10">
<label for="exampleFormControlFileInput2" class="form-label">Solid form control file</label>
<input type="file" id="exampleFormControlFileInput2" class="form-control form-control-solid">
</div>
<!-- Transparent background style -->
<div class="mb-0">
<label for="exampleFormControlFileInput3" class="form-label">Transparent form control file</label>
<input type="file" id="exampleFormControlFileInput3" class="form-control form-control-transparent">
</div>