Remove .help-block entirely
- Fixes #13267 somewhat. - Instead of a single, block-level class, let's use a combination of existing elements and classes. - For block-level help text, use p.text-muted. - For inline-level help text, use span.text-muted or small.text-muted.
This commit is contained in:
parent
5e928c7c2b
commit
faacbdb49f
|
@ -22,6 +22,7 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
|
||||||
<fieldset class="form-group">
|
<fieldset class="form-group">
|
||||||
<label for="exampleInputEmail1">Email address</label>
|
<label for="exampleInputEmail1">Email address</label>
|
||||||
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
|
||||||
|
<small class="text-muted">We'll never share your email with anyone else.</small>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="form-group">
|
<fieldset class="form-group">
|
||||||
<label for="exampleInputPassword1">Password</label>
|
<label for="exampleInputPassword1">Password</label>
|
||||||
|
@ -54,7 +55,7 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
|
||||||
<fieldset class="form-group">
|
<fieldset class="form-group">
|
||||||
<label for="exampleInputFile">File input</label>
|
<label for="exampleInputFile">File input</label>
|
||||||
<input type="file" class="form-control-file" id="exampleInputFile">
|
<input type="file" class="form-control-file" id="exampleInputFile">
|
||||||
<p class="help-block">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</p>
|
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<div class="radio">
|
<div class="radio">
|
||||||
<label>
|
<label>
|
||||||
|
@ -517,12 +518,12 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
|
||||||
Block level help text for form controls.
|
Block level help text for form controls.
|
||||||
|
|
||||||
{% example html %}
|
{% example html %}
|
||||||
<p class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</p>
|
<p class="text-help">A block of help text that breaks onto a new line and may extend beyond one line.</p>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
|
|
||||||
## Validation
|
## Validation
|
||||||
|
|
||||||
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.help-block` within that element will receive the validation styles.
|
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add `.has-warning`, `.has-error`, or `.has-success` to the parent element. Any `.control-label`, `.form-control`, and `.text-help` within that element will receive the validation styles.
|
||||||
|
|
||||||
{% comment %}
|
{% comment %}
|
||||||
{% callout warning %}
|
{% callout warning %}
|
||||||
|
|
|
@ -385,19 +385,6 @@ $form-icon-error: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGl
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
// Help text
|
|
||||||
//
|
|
||||||
// Apply to any element you wish to create light text for placement immediately
|
|
||||||
// below a form control. Use for general help, formatting, or instructional text.
|
|
||||||
|
|
||||||
.help-block {
|
|
||||||
display: block; // account for any element using help-block
|
|
||||||
margin-top: .25rem;
|
|
||||||
margin-bottom: .75rem;
|
|
||||||
color: lighten($body-color, 25%); // lighten the text some for contrast
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Inline forms
|
// Inline forms
|
||||||
//
|
//
|
||||||
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
||||||
|
|
Loading…
Reference in New Issue