When to Use Bootstrap's Row Class


A closer look at: "Can I have more than 12 columns in a single Bootstrap row?"

Numerous times on Stackoverflow I've seen questions like this..

Can I have columns add up to more than 12?

What will happen if I put more than 12 in a row?

Do I need a new row every 12 columns?

Every time I see this question, someone inevitably answers "No, you should never do that", or "columns should never be more than 12". That's when I quietly whisper to myself, WTF. Contrary to popular opinion, it's totally OK to have columns that total more than 12 units in a single row. It causes the row to wrap. This is directly from the Bootstrap docs:

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

You can also see examples of column wrapping (exceeding 12 units) in the Bootstrap docs.

In fact, there are many responsive scenarios where it's necessary to have columns exceeding 12 in a single .row element. Consider for example a layout where we want 3 columns across on larger devices, and 2 columns across on smaller devices:

By using more than 12 column units per row, the markup for this layout is simple:

See how it works:

Small viewport http://www.codeply.com/view/lDRBr3JO1c?viewport=xs
Large viewport http://www.codeply.com/view/lDRBr3JO1c?viewport=lg

If you try inserting a new row element every 12 units (or limiting the col-* units to 12 per row) you will find that it doesn't work. Remember, with Bootstrap 3 you can mix-and-match the column classes for different layouts for different viewports. Consider the "mixed grid" examples in the Bootstrap docs. You'll see cases where a single row contains 3 col-6-xs classes.

Additionally, having more than 12 columns per row is a common scenario when creating col-* dynamically. It can also be useful to go over 12 columns when you have an unknown amount of columns created dynamically, they will just wrap onto the next line, as they are floated left. If you're having a problem with gaps in columns of different height you can use a CSS clearfix every n-TH column like this.

If you're going to use more than 12 columns in a row, remember that column height does effect how things wrap because Bootstrap uses CSS floats. In some cases you may need to use responsive resets to clear the columns and prevent gaps. Bootstrap recommends "nested rows should include a set of columns that add up to 12 or fewer" if you're nesting columns inside other columns.

I hope that this post will enlighten some Bootstrap users who insist "Each row should have columns that add up to 12 and never exceed it". Read this post to learn more about how the Bootstrap grid works.

Yes, it's OK to have more than 12 columns in a single row.