Different font size for "form-text text-muted small" and "invalid-text small"
Created by: danielniccoli
I don't know if this is intended or what, but in my opinion those should have the same font sizes.
Help Text can be display with either
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">My Help Text</small>
or if you want to omit the semantics
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<p id="passwordHelpBlock" class="form-text text-muted small">My Help Text</small>
Error messages in forms can be display using Server Side Validation
<input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
<div class="invalid-feedback">Please provide a valid city.</div>
The issue I am seeing is that both, help text and error text are smaller than regular text, but still have different text sizes. For example, in my browser, help text has 12.8 px while error text has 14 px and normal text has 16 px. If I add .small
to my error text class (class="invalid-feedback small"
) it stays 14 px.
If you want to verify that, just compare the font sizes using the developer console in the linked documentation page. Maybe add class .small
to one of the .invalid-feedback
div's
When I noticed it, I had to display a list of errors (password too short, password same as username). In my case it would be beneficial if error text (.invalid-feedback
) could the same size as the help text by default. Or at least having the option to make it the same size as help text by adding .small