2

Is this valid bootstrap?

<div class="row">
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
</div>

Or do I need a new row every 12 columns?

Because right now it does not work for me to do this way. And I do not want to have a row every 12th because I need to filter my articles, and I cant do that when they are in different rows.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Joel Gullander
  • 77
  • 1
  • 9
  • 1
    Bootstrap is a 12-column based framework. So yes, you can define maximum 12 columns in a row. [Here](http://getbootstrap.com/css/#grid-example-basic) is a good visual example – Ramiz Wachtler Apr 17 '15 at 10:05

4 Answers4

3

Bootstrap has a own Grid-System, which allows you up to 12 columns. From the docu:

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

It has a reason why it is just 12, and not as many as you want to have. This article describes it perfectly well: The Subtle Magic Behind Why the Bootstrap 3 Grid Works

After reading this, you are perfectly ready to work with Bootstraps grid system in the way its meant to be.

ohboy21
  • 4,259
  • 8
  • 38
  • 66
2

You will get a new visual row every 12 columns, but you don't need to define it with markup.

From the documentation:

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks, I thought so. Unfortunately that does not work for me, some columns end up not floating..... Can it be because the height of the columns over are different? – Joel Gullander Apr 17 '15 at 10:19
1

Check out the official bootstrap docs on the grid system. It's pretty straight forward.

Basically each row should only add up to 12. So you'd be able to fit two col-sm-6 divs within a single row (displayed as two side-by-side columns)

Drew Hammond
  • 588
  • 5
  • 19
1

"Do I need a new row every 12 columns?"..

Contrary to popular opinion, it is okay to have columns that total more than 12 units in a single .row. It simply causes the row to wrap. This is known as column wrapping..

"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"

So this...

<div class="row">
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
</div>

Is functionally the same as...

<div class="row">
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
</div>
<div class="row">
 <div class="col-sm-6"></div>
 <div class="col-sm-6"></div>
</div>

However, the 2nd structure would be problematic with responsive layouts (different columns on different screen sizes). Having more than 12 columns per row is a common scenario when creating col-* dynamically. 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.. http://codeply.com/go/J6cCo3xL7H

Related: Where to place bootstrap row class

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624