Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #24768
Closed
Open
Issue created Nov 13, 2017 by Administrator@rootContributor

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

Assignee
Assign to
Time tracking