Skip to content

form_group, rows, and columns #449

@lcreid

Description

@lcreid

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 row or form-row in the wrapper_class: or wrapper: { class: } options
  • add form-row (not row) to the class, if the user did not specify either row or form-row in the wrapper_class: or wrapper: { 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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions