Differences between container, row and span in Bootstrap

Question

While using Twitter Bootstrap, should I nest a row div within a container div and put all my span divs within the nested row? Is that the best practice?

What if I put span divs directly within my row div and do not enclose the row div within a container div?

What if I put span divs directly within my container div, without using the row div at all?

All I know is that a container is 940px and a row is 960px. However, I have seen examples where a row div has been put within a container div. Is that going to help or will it make the display messy?

Please explain me the best methods to follow and under what circumstances.

Answer 1

In general you would use container > row > span

I can't think of an example where the the other 2 options you ask about would break anything, but they may not give you the results you want.

Wrapping everything in the conatiner div will manage the width of the page and side padding. Using the row div will ensure that your spans are layed out the way you want. For example imagine 2 rows that each have just have a single span4. If you don't use the row div the 2 span4s will float one next to the other instead of being stacked vertically.

There are many cases where you will have nested containers in a Bootstrap layout, the first one you will likely come across is in the nav bar, and once you start using fluid Bootstrap layouts you will see that container divs are not always 940px, but if you stick to the container > row > span arrangement it will save you some grief, especially if you are just starting.

Good luck!

Answer 2

You should have row inside a container, since using the container will ensure that the container is evenly centered across the entire page with even margins since container has margin-left:auto;margin-right:auto; in the CSS.

Use row when you want spanX's to appear on the same line.

spanX's that are not inside row will wrap.

Here's a demo that will show you the differences