I have used row and now using form-group CSS. I am confused between these 2, which one should I prefer if I want to build form controls. Seems like both do same job.
Vertical form (this is default)
The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom , but it picks up additional styles in .form-inline as needed.
The row provides the columns a place to live, ideally having columns that add up to 12. It also acts as a wrapper since all the columns float left, additional rows don't have overlaps when floats get weird. Rows also have a 15px negative margin on each side.
I usually follow this pattern:
<div class="form-group"> <div class="row"> <div class="col-md-6"></div> <div class="col-md-6"></div> </div> </div>
Note the col-md-6
and col-md-5
are examples and you can use any col-md-x
class with unlimited number. just sum MUST be 12.
The direct answer to your question is in the documentation:
".form-row" is a variation of our standard grid class ".row" which overrides the default column gutters for tighter and more compact layouts
See here: https://getbootstrap.com/docs/4.0/components/forms/#form-grid
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With