Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
Use .form-control .form-control-line
.
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control form-control-line mt-1" placeholder="Input Box">
<select class="form-control form-control-line form-select mt-1">
<option selected>Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<textarea class="form-control form-control-line mt-1" rows="3" placeholder="Textarea"></textarea>
</div>
<div class="col-md-6">
<input type="text" class="form-control form-control-line mt-1" value="Aniruddha" placeholder="Name">
<select class="form-control form-control-line form-select mt-1">
<option>Select</option>
<option selected value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
Wrap a pair of <input class="form-control">
and <label> elements in .form-floating
to enable floating labels
<div class="row">
<div class="col-sm-6">
<h6 class="h6">Input</h6>
<div class="form-floating mb-5">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Flaoting label Input</label>
</div>
<h6 class="h6">Textarea</h6>
<div class="form-floating mb-5">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Flaoting label Textarea</label>
</div>
<h6 class="h6">Select</h6>
<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected>Flaoting label select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelect">Works with selects</label>
</div>
</div>
<div class="col-sm-6">
<h6 class="h6">Value predefined</h6>
<form class="form-floating mb-5">
<input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
<label for="floatingInputValue">Input with value</label>
</form>
<h6 class="h6">Validation</h6>
<form class="form-floating">
<input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
<label for="floatingInputInvalid">Invalid input</label>
</form>
</div>
</div>