Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap form-group vs row CSS which one prefer

Tags:

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.

like image 244
Viraj Avatar asked Jan 22 '15 13:01

Viraj


People also ask

Which Bootstrap form is default?

Vertical form (this is default)

What is form-group row in Bootstrap?

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.

Why row is used in Bootstrap?

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.


2 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.

like image 138
hamed Avatar answered Sep 18 '22 16:09

hamed


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

like image 26
JTech Avatar answered Sep 19 '22 16:09

JTech