bootstrap form-group vs row CSS which one prefer

This is for Bootstrap.

form-group per set of controls on a form. If your row has multiple cols, and each col has a label and an input text, put a form-group around each label and input control, such as:

<div class="row">
    <div class="col-6">
        <div class="form-group">
            <label>Client Name: </label>
            <input type="text" name="clientName" />
        </div>
    </div>

    <div class="col-6">
        <div class="form-group">
            <label>Client Email: </label>
            <input type="text" name="clientEmail />
        </div>
    </div>
</div>

... etc.

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