Bootstrap is released under the MIT license and is copyright 2021 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.
+Bootstrap is released under the MIT license and is copyright 2022 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.
The full Bootstrap license is located in the project repository for more information.
+The full Bootstrap license is located in the project repository for more information.
@@ -272,7 +271,7 @@<form class="needs-validation" novalidate>
- <div class="form-row">
- <div class="col-md-6 mb-3">
- <label for="validationCustom01">First name</label>
- <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
- <div class="valid-feedback">
- Looks good!
- </div>
- </div>
- <div class="col-md-6 mb-3">
- <label for="validationCustom02">Last name</label>
- <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
- <div class="valid-feedback">
- Looks good!
- </div>
- </div>
- </div>
- <div class="form-row">
- <div class="col-md-6 mb-3">
- <label for="validationCustom03">City</label>
- <input type="text" class="form-control" id="validationCustom03" required>
- <div class="invalid-feedback">
- Please provide a valid city.
- </div>
- </div>
- <div class="col-md-3 mb-3">
- <label for="validationCustom04">State</label>
- <select class="custom-select" id="validationCustom04" required>
- <option selected disabled value="">Choose...</option>
- <option>...</option>
- </select>
- <div class="invalid-feedback">
- Please select a valid state.
- </div>
- </div>
- <div class="col-md-3 mb-3">
- <label for="validationCustom05">Zip</label>
- <input type="text" class="form-control" id="validationCustom05" required>
- <div class="invalid-feedback">
- Please provide a valid zip.
- </div>
- </div>
- </div>
- <div class="form-group">
- <div class="form-check">
- <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
- <label class="form-check-label" for="invalidCheck">
- Agree to terms and conditions
- </label>
- <div class="invalid-feedback">
- You must agree before submitting.
- </div>
- </div>
- </div>
- <button class="btn btn-primary" type="submit">Submit form</button>
-</form>
-
-<script>
-// Example starter JavaScript for disabling form submissions if there are invalid fields
-(function() {
- 'use strict';
- window.addEventListener('load', function() {
- // Fetch all the forms we want to apply custom Bootstrap validation styles to
- var forms = document.getElementsByClassName('needs-validation');
- // Loop over them and prevent submission
- var validation = Array.prototype.filter.call(forms, function(form) {
- form.addEventListener('submit', function(event) {
- if (form.checkValidity() === false) {
- event.preventDefault();
- event.stopPropagation();
- }
- form.classList.add('was-validated');
- }, false);
- });
- }, false);
-})();
-</script><form class="needs-validation" novalidate>
+ <div class="form-row">
+ <div class="col-md-6 mb-3">
+ <label for="validationCustom01">First name</label>
+ <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
+ <div class="valid-feedback">
+ Looks good!
+ </div>
+ </div>
+ <div class="col-md-6 mb-3">
+ <label for="validationCustom02">Last name</label>
+ <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
+ <div class="valid-feedback">
+ Looks good!
+ </div>
+ </div>
+ </div>
+ <div class="form-row">
+ <div class="col-md-6 mb-3">
+ <label for="validationCustom03">City</label>
+ <input type="text" class="form-control" id="validationCustom03" required>
+ <div class="invalid-feedback">
+ Please provide a valid city.
+ </div>
+ </div>
+ <div class="col-md-3 mb-3">
+ <label for="validationCustom04">State</label>
+ <select class="custom-select" id="validationCustom04" required>
+ <option selected disabled value="">Choose...</option>
+ <option>...</option>
+ </select>
+ <div class="invalid-feedback">
+ Please select a valid state.
+ </div>
+ </div>
+ <div class="col-md-3 mb-3">
+ <label for="validationCustom05">Zip</label>
+ <input type="text" class="form-control" id="validationCustom05" required>
+ <div class="invalid-feedback">
+ Please provide a valid zip.
+ </div>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="form-check">
+ <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
+ <label class="form-check-label" for="invalidCheck">
+ Agree to terms and conditions
+ </label>
+ <div class="invalid-feedback">
+ You must agree before submitting.
+ </div>
+ </div>
+ </div>
+ <button class="btn btn-primary" type="submit">Submit form</button>
+</form>
+
+<script>
+// Example starter JavaScript for disabling form submissions if there are invalid fields
+(function() {
+ 'use strict';
+ window.addEventListener('load', function() {
+ // Fetch all the forms we want to apply custom Bootstrap validation styles to
+ var forms = document.getElementsByClassName('needs-validation');
+ // Loop over them and prevent submission
+ var validation = Array.prototype.filter.call(forms, function(form) {
+ form.addEventListener('submit', function(event) {
+ if (form.checkValidity() === false) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ form.classList.add('was-validated');
+ }, false);
+ });
+ }, false);
+})();
+</script>Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.
While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
@@ -1644,44 +1643,44 @@<form>
- <div class="form-row">
- <div class="col-md-6 mb-3">
- <label for="validationDefault01">First name</label>
- <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
- </div>
- <div class="col-md-6 mb-3">
- <label for="validationDefault02">Last name</label>
- <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
- </div>
- </div>
- <div class="form-row">
- <div class="col-md-6 mb-3">
- <label for="validationDefault03">City</label>
- <input type="text" class="form-control" id="validationDefault03" required>
- </div>
- <div class="col-md-3 mb-3">
- <label for="validationDefault04">State</label>
- <select class="custom-select" id="validationDefault04" required>
- <option selected disabled value="">Choose...</option>
- <option>...</option>
- </select>
- </div>
- <div class="col-md-3 mb-3">
- <label for="validationDefault05">Zip</label>
- <input type="text" class="form-control" id="validationDefault05" required>
- </div>
- </div>
- <div class="form-group">
- <div class="form-check">
- <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
- <label class="form-check-label" for="invalidCheck2">
- Agree to terms and conditions
- </label>
- </div>
- </div>
- <button class="btn btn-primary" type="submit">Submit form</button>
-</form><form>
+ <div class="form-row">
+ <div class="col-md-6 mb-3">
+ <label for="validationDefault01">First name</label>
+ <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
+ </div>
+ <div class="col-md-6 mb-3">
+ <label for="validationDefault02">Last name</label>
+ <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
+ </div>
+ </div>
+ <div class="form-row">
+ <div class="col-md-6 mb-3">
+ <label for="validationDefault03">City</label>
+ <input type="text" class="form-control" id="validationDefault03" required>
+ </div>
+ <div class="col-md-3 mb-3">
+ <label for="validationDefault04">State</label>
+ <select class="custom-select" id="validationDefault04" required>
+ <option selected disabled value="">Choose...</option>
+ <option>...</option>
+ </select>
+ </div>
+ <div class="col-md-3 mb-3">
+ <label for="validationDefault05">Zip</label>
+ <input type="text" class="form-control" id="validationDefault05" required>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="form-check">
+ <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
+ <label class="form-check-label" for="invalidCheck2">
+ Agree to terms and conditions
+ </label>
+ </div>
+ </div>
+ <button class="btn btn-primary" type="submit">Submit form</button>
+</form>We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.
For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using aria-describedby. This attribute allows more than one id to be referenced, in case the field already points to additional form text.
<form>
- <div class="form-row">
- <div class="col-md-6 mb-3">
- <label for="validationServer01">First name</label>
- <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
- <div class="valid-feedback">
- Looks good!
- </div>
- </div>
- <div class="col-md-6 mb-3">
- <label for="validationServer02">Last name</label>
- <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
- <div class="valid-feedback">
- Looks good!
- </div>
- </div>
- </div>
- <div class="form-row">
- <div class="col-md-6 mb-3">
- <label for="validationServer03">City</label>
- <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
- <div id="validationServer03Feedback" class="invalid-feedback">
- Please provide a valid city.
- </div>
- </div>
- <div class="col-md-3 mb-3">
- <label for="validationServer04">State</label>
- <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
- <option selected disabled value="">Choose...</option>
- <option>...</option>
- </select>
- <div id="validationServer04Feedback" class="invalid-feedback">
- Please select a valid state.
- </div>
- </div>
- <div class="col-md-3 mb-3">
- <label for="validationServer05">Zip</label>
- <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
- <div id="validationServer05Feedback" class="invalid-feedback">
- Please provide a valid zip.
- </div>
- </div>
- </div>
- <div class="form-group">
- <div class="form-check">
- <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
- <label class="form-check-label" for="invalidCheck3">
- Agree to terms and conditions
- </label>
- <div id="invalidCheck3Feedback" class="invalid-feedback">
- You must agree before submitting.
- </div>
- </div>
- </div>
- <button class="btn btn-primary" type="submit">Submit form</button>
-</form><form>
+ <div class="form-row">
+ <div class="col-md-6 mb-3">
+ <label for="validationServer01">First name</label>
+ <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
+ <div class="valid-feedback">
+ Looks good!
+ </div>
+ </div>
+ <div class="col-md-6 mb-3">
+ <label for="validationServer02">Last name</label>
+ <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
+ <div class="valid-feedback">
+ Looks good!
+ </div>
+ </div>
+ </div>
+ <div class="form-row">
+ <div class="col-md-6 mb-3">
+ <label for="validationServer03">City</label>
+ <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
+ <div id="validationServer03Feedback" class="invalid-feedback">
+ Please provide a valid city.
+ </div>
+ </div>
+ <div class="col-md-3 mb-3">
+ <label for="validationServer04">State</label>
+ <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
+ <option selected disabled value="">Choose...</option>
+ <option>...</option>
+ </select>
+ <div id="validationServer04Feedback" class="invalid-feedback">
+ Please select a valid state.
+ </div>
+ </div>
+ <div class="col-md-3 mb-3">
+ <label for="validationServer05">Zip</label>
+ <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
+ <div id="validationServer05Feedback" class="invalid-feedback">
+ Please provide a valid zip.
+ </div>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="form-check">
+ <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
+ <label class="form-check-label" for="invalidCheck3">
+ Agree to terms and conditions
+ </label>
+ <div id="invalidCheck3Feedback" class="invalid-feedback">
+ You must agree before submitting.
+ </div>
+ </div>
+ </div>
+ <button class="btn btn-primary" type="submit">Submit form</button>
+</form>Validation styles are available for the following form controls and components:
<form class="was-validated">
- <div class="mb-3">
- <label for="validationTextarea">Textarea</label>
- <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
- <div class="invalid-feedback">
- Please enter a message in the textarea.
- </div>
- </div>
-
- <div class="custom-control custom-checkbox mb-3">
- <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
- <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
- <div class="invalid-feedback">Example invalid feedback text</div>
- </div>
-
- <div class="custom-control custom-radio">
- <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
- <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
- </div>
- <div class="custom-control custom-radio mb-3">
- <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
- <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
- <div class="invalid-feedback">More example invalid feedback text</div>
- </div>
-
- <div class="mb-3">
- <select class="custom-select" required>
- <option value="">Choose...</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </select>
- <div class="invalid-feedback">Example invalid custom select feedback</div>
- </div>
-
- <div class="custom-file mb-3">
- <input type="file" class="custom-file-input" id="validatedCustomFile" required>
- <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
- <div class="invalid-feedback">Example invalid custom file feedback</div>
- </div>
-
- <div class="mb-3">
- <div class="input-group is-invalid">
- <div class="input-group-prepend">
- <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
- </div>
- <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
- </div>
- <div class="invalid-feedback">
- Example invalid input group feedback
- </div>
- </div>
-
- <div class="mb-3">
- <div class="input-group is-invalid">
- <div class="input-group-prepend">
- <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
- </div>
- <select class="custom-select" id="validatedInputGroupSelect" required>
- <option value="">Choose...</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </select>
- </div>
- <div class="invalid-feedback">
- Example invalid input group feedback
- </div>
- </div>
-
- <div class="input-group is-invalid">
- <div class="custom-file">
- <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
- <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
- </div>
- <div class="input-group-append">
- <button class="btn btn-outline-secondary" type="button">Button</button>
- </div>
- </div>
- <div class="invalid-feedback">
- Example invalid input group feedback
- </div>
-</form><form class="was-validated">
+ <div class="mb-3">
+ <label for="validationTextarea">Textarea</label>
+ <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
+ <div class="invalid-feedback">
+ Please enter a message in the textarea.
+ </div>
+ </div>
+
+ <div class="custom-control custom-checkbox mb-3">
+ <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
+ <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
+ <div class="invalid-feedback">Example invalid feedback text</div>
+ </div>
+
+ <div class="custom-control custom-radio">
+ <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
+ <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
+ </div>
+ <div class="custom-control custom-radio mb-3">
+ <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
+ <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
+ <div class="invalid-feedback">More example invalid feedback text</div>
+ </div>
+
+ <div class="mb-3">
+ <select class="custom-select" required>
+ <option value="">Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ <div class="invalid-feedback">Example invalid custom select feedback</div>
+ </div>
+
+ <div class="custom-file mb-3">
+ <input type="file" class="custom-file-input" id="validatedCustomFile" required>
+ <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
+ <div class="invalid-feedback">Example invalid custom file feedback</div>
+ </div>
+
+ <div class="mb-3">
+ <div class="input-group is-invalid">
+ <div class="input-group-prepend">
+ <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
+ </div>
+ <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
+ </div>
+ <div class="invalid-feedback">
+ Example invalid input group feedback
+ </div>
+ </div>
+
+ <div class="mb-3">
+ <div class="input-group is-invalid">
+ <div class="input-group-prepend">
+ <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
+ </div>
+ <select class="custom-select" id="validatedInputGroupSelect" required>
+ <option value="">Choose...</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+ </select>
+ </div>
+ <div class="invalid-feedback">
+ Example invalid input group feedback
+ </div>
+ </div>
+
+ <div class="input-group is-invalid">
+ <div class="custom-file">
+ <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
+ <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
+ </div>
+ <div class="input-group-append">
+ <button class="btn btn-outline-secondary" type="button">Button</button>
+ </div>
+ </div>
+ <div class="invalid-feedback">
+ Example invalid input group feedback
+ </div>
+</form>If your form layout allows it, you can swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
<form class="needs-validation" novalidate>
- <div class="form-row">
- <div class="col-md-6 mb-3">
- <label for="validationTooltip01">First name</label>
- <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
- <div class="valid-tooltip">
- Looks good!
- </div>
- </div>
- <div class="col-md-6 mb-3">
- <label for="validationTooltip02">Last name</label>
- <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
- <div class="valid-tooltip">
- Looks good!
- </div>
- </div>
- </div>
- <div class="form-row">
- <div class="col-md-6 mb-3">
- <label for="validationTooltip03">City</label>
- <input type="text" class="form-control" id="validationTooltip03" required>
- <div class="invalid-tooltip">
- Please provide a valid city.
- </div>
- </div>
- <div class="col-md-3 mb-3">
- <label for="validationTooltip04">State</label>
- <select class="custom-select" id="validationTooltip04" required>
- <option selected disabled value="">Choose...</option>
- <option>...</option>
- </select>
- <div class="invalid-tooltip">
- Please select a valid state.
- </div>
- </div>
- <div class="col-md-3 mb-3">
- <label for="validationTooltip05">Zip</label>
- <input type="text" class="form-control" id="validationTooltip05" required>
- <div class="invalid-tooltip">
- Please provide a valid zip.
- </div>
- </div>
- </div>
- <button class="btn btn-primary" type="submit">Submit form</button>
-</form><form class="needs-validation" novalidate>
+ <div class="form-row">
+ <div class="col-md-6 mb-3">
+ <label for="validationTooltip01">First name</label>
+ <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
+ <div class="valid-tooltip">
+ Looks good!
+ </div>
+ </div>
+ <div class="col-md-6 mb-3">
+ <label for="validationTooltip02">Last name</label>
+ <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
+ <div class="valid-tooltip">
+ Looks good!
+ </div>
+ </div>
+ </div>
+ <div class="form-row">
+ <div class="col-md-6 mb-3">
+ <label for="validationTooltip03">City</label>
+ <input type="text" class="form-control" id="validationTooltip03" required>
+ <div class="invalid-tooltip">
+ Please provide a valid city.
+ </div>
+ </div>
+ <div class="col-md-3 mb-3">
+ <label for="validationTooltip04">State</label>
+ <select class="custom-select" id="validationTooltip04" required>
+ <option selected disabled value="">Choose...</option>
+ <option>...</option>
+ </select>
+ <div class="invalid-tooltip">
+ Please select a valid state.
+ </div>
+ </div>
+ <div class="col-md-3 mb-3">
+ <label for="validationTooltip05">Zip</label>
+ <input type="text" class="form-control" id="validationTooltip05" required>
+ <div class="invalid-tooltip">
+ Please provide a valid zip.
+ </div>
+ </div>
+ </div>
+ <button class="btn btn-primary" type="submit">Submit form</button>
+</form>Validation states can be customized via Sass with the $form-validation-states map. Located in our _variables.scss file, this Sass map is looped over to generate the default valid/invalid validation states. Included is a nested map for customizing each state’s color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
Please note that we do not recommend customizing these values without also modifying the form-validation-state mixin.
// Sass map from `_variables.scss`
-// Override this and recompile your Sass to generate different states
-$form-validation-states: map-merge(
- (
- "valid": (
- "color": $form-feedback-valid-color,
- "icon": $form-feedback-icon-valid
- ),
- "invalid": (
- "color": $form-feedback-invalid-color,
- "icon": $form-feedback-icon-invalid
- )
- ),
- $form-validation-states
-);
-
-// Loop from `_forms.scss`
-// Any modifications to the above Sass map will be reflected in your compiled
-// CSS via this loop.
-@each $state, $data in $form-validation-states {
- @include form-validation-state($state, map-get($data, color), map-get($data, icon));
-}
-// Sass map from `_variables.scss`
+// Override this and recompile your Sass to generate different states
+$form-validation-states: map-merge(
+ (
+ "valid": (
+ "color": $form-feedback-valid-color,
+ "icon": $form-feedback-icon-valid
+ ),
+ "invalid": (
+ "color": $form-feedback-invalid-color,
+ "icon": $form-feedback-icon-invalid
+ )
+ ),
+ $form-validation-states
+);
+
+// Loop from `_forms.scss`
+// Any modifications to the above Sass map will be reflected in your compiled
+// CSS via this loop.
+@each $state, $data in $form-validation-states {
+ @include form-validation-state($state, map-get($data, color), map-get($data, icon));
+}
+To detect what elements need rounded corners inside an input group with validation, an input group requires an additional .has-validation class.
<div class="input-group has-validation">
- <div class="input-group-prepend">
- <span class="input-group-text">@</span>
- </div>
- <input type="text" class="form-control" required>
- <div class="invalid-feedback">
- Please choose a username.
- </div>
-</div>
-<div class="input-group has-validation">
+ <div class="input-group-prepend">
+ <span class="input-group-text">@</span>
+ </div>
+ <input type="text" class="form-control" required>
+ <div class="invalid-feedback">
+ Please choose a username.
+ </div>
+</div>
+<div class="custom-control custom-checkbox">
- <input type="checkbox" class="custom-control-input" id="customCheck1">
- <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
-</div><div class="custom-control custom-checkbox">
+ <input type="checkbox" class="custom-control-input" id="customCheck1">
+ <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
+</div>Custom checkboxes can also utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
If you’re using jQuery, something like this should suffice:
-$('.your-checkbox').prop('indeterminate', true)
-$('.your-checkbox').prop('indeterminate', true)
+<div class="custom-control custom-radio">
- <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
- <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
-</div>
-<div class="custom-control custom-radio">
- <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
- <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
-</div><div class="custom-control custom-radio">
+ <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
+ <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
+</div>
+<div class="custom-control custom-radio">
+ <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
+ <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
+</div><div class="custom-control custom-radio custom-control-inline">
- <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
- <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
-</div>
-<div class="custom-control custom-radio custom-control-inline">
- <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
- <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
-</div><div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
+ <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
+</div>
+<div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
+ <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
+</div>Custom checkboxes and radios can also be disabled. Add the disabled boolean attribute to the <input> and the custom indicator and label description will be automatically styled.
<div class="custom-control custom-checkbox">
- <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
- <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
-</div>
-
-<div class="custom-control custom-radio">
- <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
- <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
-</div><div class="custom-control custom-checkbox">
+ <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
+ <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
+</div>
+
+<div class="custom-control custom-radio">
+ <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
+ <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
+</div>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>
-<div class="custom-control custom-switch">
- <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
- <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
-</div><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>
+<div class="custom-control custom-switch">
+ <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
+ <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
+</div>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.
<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><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>You may also choose from small and large custom selects to match our similarly sized text inputs.
<select class="custom-select custom-select-lg mb-3">
- <option selected>Open this select menu</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
-</select>
-
-<select class="custom-select custom-select-sm">
- <option selected>Open this select menu</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
-</select><select class="custom-select custom-select-lg mb-3">
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+</select>
+
+<select class="custom-select custom-select-sm">
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+</select>The multiple attribute is also supported:
<select class="custom-select" multiple>
- <option selected>Open this select menu</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
-</select><select class="custom-select" multiple>
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+</select>As is the size attribute:
<select class="custom-select" size="3">
- <option selected>Open this select menu</option>
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
-</select><select class="custom-select" size="3">
+ <option selected>Open this select menu</option>
+ <option value="1">One</option>
+ <option value="2">Two</option>
+ <option value="3">Three</option>
+</select>Create custom <input type="range"> controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
<label for="customRange1">Example range</label>
-<input type="range" class="custom-range" id="customRange1"><label for="customRange1">Example range</label>
+<input type="range" class="custom-range" id="customRange1">Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.
<label for="customRange2">Example range</label>
-<input type="range" class="custom-range" min="0" max="5" id="customRange2"><label for="customRange2">Example range</label>
+<input type="range" class="custom-range" min="0" max="5" id="customRange2">By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".
<label for="customRange3">Example range</label>
-<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3"><label for="customRange3">Example range</label>
+<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3"><div class="custom-file">
- <input type="file" class="custom-file-input" id="customFile">
- <label class="custom-file-label" for="customFile">Choose file</label>
-</div><div class="custom-file">
+ <input type="file" class="custom-file-input" id="customFile">
+ <label class="custom-file-label" for="customFile">Choose file</label>
+</div>We hide the default file <input> via opacity and instead style the <label>. The button is generated and positioned with ::after. Lastly, we declare a width and height on the <input> for proper spacing for surrounding content.
The :lang() pseudo-class is used to allow for translation of the “Browse” text into other languages. Override or add entries to the $custom-file-text Sass variable with the relevant language tag and localized strings. The English strings can be customized the same way. For example, here’s how one might add a Spanish translation (Spanish’s language code is es):
$custom-file-text: (
- en: "Browse",
- es: "Elegir"
-);
-Here’s lang(es) in action on the custom file input for a Spanish translation:
$custom-file-text: (
+ en: "Browse",
+ es: "Elegir"
+);
+Here’s lang(es) in action on the custom file input for a Spanish translation:
<div class="custom-file">
- <input type="file" class="custom-file-input" id="customFileLang" lang="es">
- <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
-</div><div class="custom-file">
+ <input type="file" class="custom-file-input" id="customFileLang" lang="es">
+ <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
+</div>You’ll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using the lang attribute on the <html> element or the Content-Language HTTP header, among other methods.
Bootstrap also provides a way to translate the “Browse” text in HTML with the data-browse attribute which can be added to the custom input label (example in Dutch):
<div class="custom-file">
- <input type="file" class="custom-file-input" id="customFileLangHTML">
- <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
-</div><div class="custom-file">
+ <input type="file" class="custom-file-input" id="customFileLangHTML">
+ <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
+</div>`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Remove the bottom border in Firefox 39-.\n// 5. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-original-title] { // 1\n text-decoration: underline; // 2\n text-decoration: underline dotted; // 2\n cursor: help; // 3\n border-bottom: 0; // 4\n text-decoration-skip-ink: none; // 5\n}\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // Undo browser default\n}\n\nblockquote {\n margin: 0 0 1rem;\n}\n\nb,\nstrong {\n font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari\n}\n\nsmall {\n @include font-size(80%); // Add the correct font size in all browsers\n}\n\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n//\n\nsub,\nsup {\n position: relative;\n @include font-size(75%);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n//\n// Links\n//\n\na {\n color: $link-color;\n text-decoration: $link-decoration;\n background-color: transparent; // Remove the gray background on active links in IE 10.\n\n @include hover() {\n color: $link-hover-color;\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n color: inherit;\n text-decoration: none;\n\n @include hover() {\n color: inherit;\n text-decoration: none;\n }\n}\n\n\n//\n// Code\n//\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-monospace;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n}\n\npre {\n // Remove browser default top margin\n margin-top: 0;\n // Reset browser default of `1em` to use `rem`s\n margin-bottom: 1rem;\n // Don't allow content to break outside\n overflow: auto;\n // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,\n // making it impossible to interact with the content\n -ms-overflow-style: scrollbar;\n}\n\n\n//\n// Figures\n//\n\nfigure {\n // Apply a consistent margin strategy (matches our type styles).\n margin: 0 0 1rem;\n}\n\n\n//\n// Images and content\n//\n\nimg {\n vertical-align: middle;\n border-style: none; // Remove the border on images inside links in IE 10-.\n}\n\nsvg {\n // Workaround for the SVG overflow bug in IE10/11 is still required.\n // See https://github.com/twbs/bootstrap/issues/26878\n overflow: hidden;\n vertical-align: middle;\n}\n\n\n//\n// Tables\n//\n\ntable {\n border-collapse: collapse; // Prevent double borders\n}\n\ncaption {\n padding-top: $table-cell-padding;\n padding-bottom: $table-cell-padding;\n color: $table-caption-color;\n text-align: left;\n caption-side: bottom;\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `