CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Joel Gullander
Joel Gullander

Reputation: 87

Bootstrap row and col explanation

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.

Upvotes: 2

Views: 1169

Answers (4)

Carol Skelly
Carol Skelly

Reputation: 362290

"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

Upvotes: 1

Quentin
Quentin

Reputation: 943108

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.

Upvotes: 2

Drew Hammond
Drew Hammond

Reputation: 588

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)

Upvotes: 1

ohboy21
ohboy21

Reputation: 4319

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.

Upvotes: 3

Related Questions