Andy Andy - 1 month ago 6
CSS Question

What is the purpose of .row in Bootstrap?

According to Bootstrap's documentation


Rows must be placed within a .container (fixed-width) or .container-fluid (full-width)


and


Use rows to create horizontal groups of columns.


Why is this necessary?

A
.row
can only occupy the maximum width of either
.container
or
.container-fluid


Given that you have to close the
.row
it seems longer to write:

<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Column A</h1>
</div>
<div class="col-md-6">
<h1>Column B</h1>
</div>
</div>

<div class="row">
<div class="col-md-6">
<h1>Column C</h1>
</div>
<div class="col-md-6">
<h1>Column D</h1>
</div>
</div>

</div>


Than this:

<div class="container">
<div class="col-md-6">
<h1>Column A</h1>
</div>
<div class="col-md-6">
<h1>Column B</h1>
</div>
</div>

<div class="container">
<div class="col-md-6">
<h1>Column C</h1>
</div>
<div class="col-md-6">
<h1>Column D</h1>
</div>
</div>

Answer

Container

The container provide the width constraints on responsive widths. When the responsive sizes change, it’s the container that changes. Rows and columns are all percentage based so they don’t need to change. Note that there is a 15px margin on each side, canceled by rows.


Rows

Rows should always be in a container.

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. The div that makes up the row would normally be constrained inside of the containers padding, touching the edges of the pink area but not beyond. The 15px negative margins push the row out over top of the containers 15px padding, essentially negating it. Furthermore, rows ensure you that all of the divs inside of it appear on their own line, separated from the previous and the following rows.


Columns

The columns now have 15px padding. This padding means that the columns actually touch the edge of the row, which itself touches the edge of the container since the row has the negative margin, and the container has the positive padding. But, the padding on the column pushes anything inside the column in to where it needs to be, and also provides the 30px gutter between columns. Never use a column outside of a row, it won’t work.


For more information, I suggest you to read this article. It is really clear, and explain well how Bootstrap's grid system works.

Comments