Form Elements page header description goes here...
Form controls
Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more. Please read the official Bootstrap documentation for the full list of options.
<!-- text input -->
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="form-group">
<!-- select -->
<select class="form-control">
...
</select>
<!-- multiple select -->
<select multiple class="form-control">
...
</select>
<!-- textarea -->
<textarea class="form-control" rows="3"></textarea>
<!-- file input -->
<input type="file" class="form-control-file" id="exampleFormControlFile1" />Sizing
Set heights using classes like .form-control-lg and .form-control-sm.
<!-- input text -->
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<!-- select -->
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
<select class="form-control">
<option>Default select</option>
</select>
<select class="form-control form-control-sm">
<option>Small select</option>
</select>Readonly
Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly />Readonly plain text
If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding.
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>Range inputs
Set horizontally scrollable range inputs using .form-control-range.
<!-- default range -->
<input type="range" class="form-control-range" id="formControlRange" />
<!-- custom range -->
<input type="range" class="custom-range" id="customRange1" />Checkboxes
Default checkboxes are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. You can use Bootstrap custom checkbox for styled checkboxes.
<!-- checkbox -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1" disabled />
<label class="form-check-label" for="defaultCheck1">Default checkbox</label>
</div>
<!-- custom checkbox -->
<div class="custom-control custom-checkbox custom-control-inline">
<input class="custom-control-input" type="checkbox" value="" id="customCheck1" disabled />
<label class="custom-control-label" for="customCheck1">Custom checkbox</label>
</div>Radios
Default radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. You can use Bootstrap custom radio for styled radio button.
<!-- radio -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="" id="defaultRadio1" disabled />
<label class="form-check-label" for="defaultRadio1">Default checkbox</label>
</div>
<!-- custom checkbox -->
<div class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" type="radio" value="" id="customRadio1" disabled />
<label class="custom-control-label" for="customRadio1">Custom radio</label>
</div>Switches
A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>Select menu
Custom <select> menus need only a custom class, .custom-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.
<!-- custom select -->
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<!-- custom-select-lg -->
<select class="custom-select custom-select-lg">...</select>
<!-- custom-select-sm -->
<select class="custom-select custom-select-sm">...</select>File browser
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" />
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<!-- required js file -->
<script src="/assets/plugins/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<!-- init plugins -->
<script>
$(document).ready(function() {
bsCustomFileInput.init();
});
</script>Form groups
The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging.
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
</form>Form grid
More complex forms can be built using bootstrap grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>Help text
Block-level help text in forms can be created using .form-text. Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>Input group
Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" />
<div class="input-group-append">
<span class="input-group-text">.com</span>
</div>
</div>Validation
Provide valuable, actionable feedback to your users with HTML5 form validation. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
<form class="was-validated">
<!-- valid input -->
<input type="text" class="form-control is-valid" value="" required />
<div class="valid-feedback">Looks good!</div>
<!-- invalid input -->
<input type="text" class="form-control is-invalid" value="" required />
<div class="invalid-feedback">Field is required</div>
<!-- valid tooltip -->
<div class="valid-tooltip">Looks good!</div>
<!-- invalid tooltip -->
<div class="invalid-tooltip">Field is required</div>
<!-- custom checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input is-valid" required />
</div>
<!-- custom radio -->
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input is-valid" required />
</div>
<!-- custom select -->
<select class="custom-select is-invalid" required>... </select>
<!-- custom file -->
<div class="custom-file">
<input type="file" class="custom-file-input is-invalid" required />
</div>
</form>