-   Notifications  
You must be signed in to change notification settings  - Fork 359
 
Description
With Bootstrap 3, .form-group contained the styles of a .row via a mixin (see the "Horizontal forms overhauled" bullet at https://getbootstrap.com/docs/4.0/migration/#forms-1). Bootstrap 4 does not mix in .row to .form-group. Also, in Bootstrap 4 there are two row classes: .row, and .form-row which has smaller gutters.
Even with Bootstrap 3, there was issue #89 (and may have been others) that was raised about the challenge of making a horizontal form. Since .row was baked in to form-group, it was difficult to fix.
I'd like to suggest that for version 4.0, the form_group helper should not put any additional styles, i.e. .row on a div.form-group, unless the layout is :horizontal, either at the form_group level or the bootstrap_form_for level.
If the layout is :horizontal, form_group should:
- add nothing to the classes, if the user specified either 
roworform-rowin thewrapper_class:orwrapper: { class: }options - add 
form-row(notrow) to the class, if the user did not specify eitherroworform-rowin thewrapper_class:orwrapper: { class: }options 
The reason for the above is because .col has to be an immediate child of .row. Since we generate a div.form-group for almost all inputs, we have to put the row class(es) on the div.form-group.
I think it would be worthwhile to highlight this change in the UPGRADE-4.0 document, as I suspect that people have tried various tricks to get horizontal forms to lay out nicely.
It's worth noting that https://github.com/twbs/bootstrap/blob/fb60a4a9867eb1fc18cf310de2bbb8f21e262e6b/scss/_forms.scss#L172-L175 says .form-group is for vertical, AKA, default layout forms, and that horizontal forms should use the predefined grid classes. That might open the door to another option: Not generate the div.form-group at all if layout: :horizontal and leave it completely up to the user. I haven't thought this option through as much as the above, but I think it's worth thinking about.