25

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.

0

3 Answers 3

29

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.

4
  • 10
    When the .form-group is inside a .form-horizontal, you don't need .row. This point is mentioned at: getbootstrap.com/css/#forms-horizontal. The exact lines are: Doing so changes .form-groups to behave as grid rows, so no need for .row
    – Vijey
    Commented Dec 29, 2015 at 10:59
  • according getbootstrap.com/docs/4.1/components/forms/#form-groups , you can use form-group to give standard for each row inside an html form , inside form-group you can use row or form-row class to organize columns inside a row
    – Omar Isaid
    Commented Sep 1, 2018 at 16:11
  • Are you sure you need to have a row inside Form-group. I believe you have directly specify col-md-x inside form-group same as row Commented Jul 8, 2019 at 8:25
  • class="form-horizontal" is deprecated in bootstrap 4. We can use form-group and row together in the same div: <div class="form-group row">, according to getbootstrap.com/docs/4.1/components/forms/#horizontal-form
    – Ryan
    Commented Dec 28, 2019 at 18:00
6

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

0
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.