Explore Our Templates 🚀
Advance Form UI
Create beautifully simple form labels that float over your input fields.
Custom Form controls
Use .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><template>
<BRow>
<BCol md="6">
<BFormInput type="text" class="form-control-line mt-1" placeholder="Input Box"/>
<BFormSelect class="form-control-line mt-1" model-value="selected">
<BFormSelectOption value="selected">Select</BFormSelectOption>
<BFormSelectOption value="1">One</BFormSelectOption>
<BFormSelectOption value="2">Two</BFormSelectOption>
<BFormSelectOption value="3">Three</BFormSelectOption>
</BFormSelect>
<BFormTextarea class="form-control-line mt-1" placeholder="Textarea" rows="3"/>
</BCol>
<BCol md="6">
<BFormInput type="text" class="form-control-line mt-1" model-value="Aniruddha" placeholder="Name" />
<BFormSelect class="form-control-line mt-1" model-value="1">
<BFormSelectOption value="selected">Select</BFormSelectOption>
<BFormSelectOption value="1">One</BFormSelectOption>
<BFormSelectOption value="2">Two</BFormSelectOption>
<BFormSelectOption value="3">Three</BFormSelectOption>
</BFormSelect>
</BCol>
</BRow>
</template><template>
<BRow>
<BCol md="6">
<BFormInput type="text" class="form-control-line mt-1" placeholder="Input Box"/>
<BFormSelect class="form-control-line mt-1" model-value="selected">
<BFormSelectOption value="selected">Select</BFormSelectOption>
<BFormSelectOption value="1">One</BFormSelectOption>
<BFormSelectOption value="2">Two</BFormSelectOption>
<BFormSelectOption value="3">Three</BFormSelectOption>
</BFormSelect>
<BFormTextarea class="form-control-line mt-1" placeholder="Textarea" rows="3"/>
</BCol>
<BCol md="6">
<BFormInput type="text" class="form-control-line mt-1" model-value="Aniruddha" placeholder="Name" />
<BFormSelect class="form-control-line mt-1" model-value="1">
<BFormSelectOption value="selected">Select</BFormSelectOption>
<BFormSelectOption value="1">One</BFormSelectOption>
<BFormSelectOption value="2">Two</BFormSelectOption>
<BFormSelectOption value="3">Three</BFormSelectOption>
</BFormSelect>
</BCol>
</BRow>
</template><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>Floating labels
Wrap a <Form.Control> element in <FloatingLabel> to enable floating labels with Bootstrap’s textual form fields. A placeholder is required on each <Form.Control> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element.
Input
Textarea
Select
Value predefined
Validation
<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><template>
<BRow>
<BCol sm="6">
<h6 class="h6">Input</h6>
<BFormFloatingLabel label="Flaoting label Input" label-for="floatingEmail" class="mb-5">
<BFormInput id="floatingEmail" type="email" placeholder="name@example.com" />
</BFormFloatingLabel>
<h6 class="h6">Textarea</h6>
<BFormFloatingLabel label="Flaoting label Textarea" label-for="floatingTextarea" class="mb-5">
<BFormTextarea id="floatingTextarea" placeholder="Leave a comment here" rows="3" />
</BFormFloatingLabel>
<h6 class="h6">Select</h6>
<BFormFloatingLabel label="Works with selects" label-for="floatingSelect" class="mb-5">
<BFormSelect id="floatingSelect" model-value="selected">
<BFormSelectOption value="selected">Flaoting label select</BFormSelectOption>
<BFormSelectOption value="1">One</BFormSelectOption>
<BFormSelectOption value="2">Two</BFormSelectOption>
<BFormSelectOption value="3">Three</BFormSelectOption>
</BFormSelect>
</BFormFloatingLabel>
</BCol>
<BCol sm="6">
<h6 class="h6">Value predefined</h6>
<BFormFloatingLabel label="Input with value" label-for="floatingInputValue" class="mb-5">
<BFormInput id="floatingInputValue" type="email" placeholder="name@example.com" model-value="test@example.com" />
</BFormFloatingLabel>
<h6 class="h6">Validation</h6>
<BFormFloatingLabel label="Invalid input" label-for="floatingInputInvalid">
<BFormInput id="floatingInputInvalid" type="email" placeholder="name@example.com" model-value="test@example.com" :state="false" />
</BFormFloatingLabel>
</BCol>
</BRow>
</template><template>
<BRow>
<BCol sm="6">
<h6 class="h6">Input</h6>
<BFormFloatingLabel label="Flaoting label Input" label-for="floatingEmail" class="mb-5">
<BFormInput id="floatingEmail" type="email" placeholder="name@example.com" />
</BFormFloatingLabel>
<h6 class="h6">Textarea</h6>
<BFormFloatingLabel label="Flaoting label Textarea" label-for="floatingTextarea" class="mb-5">
<BFormTextarea id="floatingTextarea" placeholder="Leave a comment here" rows="3" />
</BFormFloatingLabel>
<h6 class="h6">Select</h6>
<BFormFloatingLabel label="Works with selects" label-for="floatingSelect" class="mb-5">
<BFormSelect id="floatingSelect" model-value="selected">
<BFormSelectOption value="selected">Flaoting label select</BFormSelectOption>
<BFormSelectOption value="1">One</BFormSelectOption>
<BFormSelectOption value="2">Two</BFormSelectOption>
<BFormSelectOption value="3">Three</BFormSelectOption>
</BFormSelect>
</BFormFloatingLabel>
</BCol>
<BCol sm="6">
<h6 class="h6">Value predefined</h6>
<BFormFloatingLabel label="Input with value" label-for="floatingInputValue" class="mb-5">
<BFormInput id="floatingInputValue" type="email" placeholder="name@example.com" model-value="test@example.com" />
</BFormFloatingLabel>
<h6 class="h6">Validation</h6>
<BFormFloatingLabel label="Invalid input" label-for="floatingInputInvalid">
<BFormInput id="floatingInputInvalid" type="email" placeholder="name@example.com" model-value="test@example.com" :state="false" />
</BFormFloatingLabel>
</BCol>
</BRow>
</template><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>