Different font size for "form-text text-muted small" and "invalid-text small"

[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

[andresgalante]

Hi @Borkason I am kinda lost with how you use invalid messages. Why do you use small at all? If you use the class invalid-feedback to whatever element you chose to wrap the message you should have consistent font size.

Am I missing something?

[danielniccoli]

Both, help text and error messages are displayed under the input element. Help text is supposed to be small. So should invalid-text. As I see it, it's currently inconsistent and makes no sense. Why is one a different size than the other?

[andresgalante]

You are right, I see what you mean, small is set to 80%. I'll patch my PR with a fix. Thanks a lot for the explanation