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.
3 Answers
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.
-
10When 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– VijeyCommented 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 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– RyanCommented Dec 28, 2019 at 18:00
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
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.