CODEWITHSUNDEEP
bootstrap-4flexboxrow
vchan
vchan

Reputation: 860

Difference between the classes row and form-row in Bootstrap 4

I am currently working on a project where I am using Bootstrap 4.0.0.

What I would like to know is what is the difference between the two classes row and form-row?

Upvotes: 4

Views: 1537

Answers (1)

Tommy
Tommy

Reputation: 2453

Having a look at the Bootstrap 4.0.0 docs gives us the following information:

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

Let's visualize this on the example for .row vs. .form-row they are using:

Example for .row vs. .form-row

Or have a look on the CSS used:

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.form-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

In summary, it is just used to change the spacing between form input elements in order to build more compact layouts. This works very well in combination with the grid system, as shown in their second example that you can retrieve from the link.

So you need to decide whether you want your form input elements to be placed more tighter or not, and use the appropriate class.

Outlook for Bootstrap 5: Gutters will be introduced to control the width of these spacings event more.

Good luck!

Upvotes: 4

Related Questions