.form-groups seem arbitrary and unnecessarily complex.

Created by: danielniccoli

I found myself being confused every time I look something up in the form docs and today I decided to spent some time to figure out why: The concept of .form-groups adds another layer of complexity that isn't necessary. Using .form-group seems or is mostly arbitrary.

The .form-group class is the easiest way to add some structure to forms. Its only purpose is to provide margin-bottom around a label and control pairing. As a bonus, since it’s a class you can use it with <fieldset>s, <div>s, or nearly any other element.

They are used in the majority of form examples in the docs, like the "more complex layout" under Form Rows.

However …
If you remove the .form-group from the first row (Email, Password) it doesn't make a difference.
If you remove the .form-group from the second and third row (Address, Address 2) it just looks broken.
If you remove the .form-group from Horizontal Forms it just looks broken.
This example doesn't even use them and adding them doesn't change its style.

So basically, using .form-group on most forms is mandatory, otherwise it just looks like bad styling or even broken. When it's not mandatory, it doesn't matter whether you add it or not, the form looks the same. In other words: Adding .form-group to any form where it's not already present, doesn't change its appearance anyway.

My suggestion is to remove .form-group altogether and provide the margin-bottom around a label-control pair by default, as seen in this example. Further control of margin can be achieved using the Spacing Utilities. This would de-bloat both, forms and docs and make them easier to understand conceptually.