Bootstrap Row And Col Explanation

Is this valid bootstrap?

<

Solution 1:

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.

Solution 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.

Solution 3:

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)

Solution 4:

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

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

Is functionally the same as...

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

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

Share