Bootstrap Row and Col Explanation

What's the meaning of the row class in Bootstrap, its difference from containers, and how does it stack with col-***-*?

In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 50%. The col-md-4 will hold 33.3%, and the col-md-2 will hold the remaining 16.66%.

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-4"></div>
    <div class="col-md-2"></div>
</div>

Bootstrap Rows and Columns - Do I need to use row?

Bootstrap 5 (update 2022)

Technically row isn't required in Bootstrap 5 since columns can be used standalone to set width, However, row is still needed for the flexbox grid system which is primary how columns are used.

---

Bootstrap 3, Bootstrap 4 (original answer)

Bootstrap Rows and Columns - Do I need to use row?

Yes, you need to use row.

---

Update 2018

The row>col relationship is the same in both Bootstrap 3 and 4 in that..

"only columns may be immediate children of rows"

So, the nested columns (.col-*) must also be inside a .row:

<div class="row">
  <div class="col-xs-12">
    <div class="row">
       <div class="col-xs-4">some content</div>
       <div class="col-xs-8">some other content</div>
    </div>
  </div>
</div>

As you can see here you should always use the row. This is very important in Bootstrap 4 because the columns will simply stack (wrap) vertically if not placed inside a .row. The .row has a negative margin of 15px on either side, so the benefit is that..

• 100% width content inside container
• separate content into rows (force cols to be on line)
• nest the grid row>col and maintain alignment on outer sides

---

From the Bootstrap 3 Docs...

Content should be placed within columns, and only columns may be
immediate children of rows.

From the Bootstrap 4 Docs...

Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This padding
is then counteracted on the rows with negative margins. This way, all
the content in your columns is visually aligned down the left side... content must be placed within columns and only columns may be immediate children of
rows.

---

https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc

What is the purpose of .row in Bootstrap?

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 container's 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.

Bootstrap - do we have to use rows and columns?

They can sit outside of a column, but in doing this you're sacrificing padding. Bootstrap's .row style sets margin-left and margin-right to -15px; the .col-... classes make up for this with 15px padding on either side.

To make up for it, you'd have to manually add this 15px padding to your non-.col-... elements.

That said, however, there's no reason your h1 can't be a .col-... itself:

<div class="row">
  <h1 class="col-md-12">Title</h1>
  <div class="col-md-12">Content</div>
</div>

Inside row row-cols-*, width determination for col when there's sibling col-*

It's a common misconception.

row-cols-* sets the columns on the row.

So for example: row-cols-4 would mean the row should be divided into 4 columns, thus each column would implicitly be a col-3. Now, when you do a row-cols-4 and put col, col, col-6 and col inside it, you are giving the 3rd column (col-6) double of what is assigned to each column in the row.
Now what you thought was this would distribute the remaining 6 columns into 3 and give 2 to each of the remaining. That isn't so. The other columns still get 3 column spaces. Because that is what we assigned as a minimum when we did row-cols-4. Anything extra will wrap, as it is doing.

I hope this clears something up.

Meaning of numbers in col-md-4, col-xs-1, col-lg-2 in Bootstrap

Applies to Bootstrap 3 only.

Ignoring the letters (xs, sm, md, lg) for now, I'll start with just the numbers...

• the numbers (1-12) represent a portion of the total width of any div
• all divs are divided into 12 columns
• so, col-*-6 spans 6 of 12 columns (half the width), col-*-12 spans 12 of 12 columns (the entire width), etc

So, if you want two equal columns to span a div, write

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

Or, if you want three unequal columns to span that same width, you could write:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

You'll notice the # of columns always add up to 12. It can be less than twelve, but beware if more than 12, as your offending divs will bump down to the next row (not .row, which is another story altogether).

You can also nest columns within columns, (best with a .row wrapper around them) such as:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

Each set of nested divs also span up to 12 columns of their parent div. NOTE: Since each .col class has 15px padding on either side, you should usually wrap nested columns in a .row, which has -15px margins. This avoids duplicating the padding and keeps the content lined up between nested and non-nested col classes.

-- You didn't specifically ask about the xs, sm, md, lg usage, but they go hand-in-hand so I can't help but touch on it...

In short, they are used to define at which screen size that class should apply:

• xs = extra small screens (mobile phones)
• sm = small screens (tablets)
• md = medium screens (some desktops)
• lg = large screens (remaining desktops)

Read the "Grid
Options"
chapter from the official Bootstrap documentation for more details.

You should usually classify a div using multiple column classes so it behaves differently depending on the screen size (this is the heart of what makes bootstrap responsive). eg: a div with classes col-xs-6 and col-sm-4 will span half the screen on the mobile phone (xs) and 1/3 of the screen on tablets(sm).

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

NOTE: as per comment below, grid classes for a given screen size apply to that screen size and larger unless another declaration overrides it (i.e. col-xs-6 col-md-4 spans 6 columns on xs and sm, and 4 columns on md and lg, even though sm and lg were never explicitly declared)

NOTE: if you don't define xs, it will default to col-xs-12 (i.e. col-sm-6 is half the width on sm, md and lg screens, but full-width on xs screens).

NOTE: it's actually totally fine if your .row includes more than 12 cols, as long as you are aware of how they will react. --This is a contentious issue, and not everyone agrees.

Bootstrap row vs let column wrap

In the specific case you've shown, NO, there is no difference since only a single breakpoint (the xs default breakpoint) is being used.

However, if you wanted to create a responsive layout with different widths at different breakpoints, the 1st example would be preferred.

For example, suppose you want 4-cols on md and larger, and 2-cols on mobile. You'd use a single row with multi-breakpoint columns...

<div class="container">
    <div class="row">
        <div class="col-6 col-md-3">Col-1</div>
        <div class="col-6 col-md-3">Col-2</div>
        <div class="col-6 col-md-3">Col-3</div>
        <div class="col-6 col-md-3">Col-4</div>
    </div>
</div>

Whereas, splitting the cols in 2 rows simply wouldn't work for this responsive layout.

Demo

---

Related: Bootstrap row and col explanation

---

Related Topics