Suggestion to remove .col-form-label in horizontal forms in favour of cleaner code and better looking forms
Created by: danielniccoli
From the documentation
Be sure to add .col-form-label to your <label>s as well so they’re vertically centered with their associated form controls.
While working with forms I stumbled about something that seems overly tedious. I experimented with two forms in a JSFiddle and the result is this:
In Form 1 .col-form-label does indeed vertically position the label in a horizontal form. Although this does not apply to larger form controls like <textarea>. What actually happens is that the label's baseline is aligned with its associated form control's baseline of its first line of text. But that's just a side note.
If you are omitting .col-form-label, the label aligns at the top of its associated form control, making the form look unbalanced or even "broken". You can see this at Form 2
That practically makes .col-form-label a requirement in horizontal forms. So, if something is required, why not make it the default? My suggestion is that class .col-form-label should be removed, but it's properties should be the default for any label of horizontal forms. In my understanding this can easily be done, because any affected label is a direct child of a div with both classes .form-group and .row.
This change would give all horizontal forms a clean visual look by default and make them easier to understand and quicker to write while removing unnecessary clutter from the code.
This would also improve the documentation as col-form-label is mentioned in the form docs 26 times at the time of writing this suggestion.
