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 pu

Answer 1

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

Answer 2

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 3

A row is designed to go inside of a container. A span is designed to go inside of a row.

Rendering could get unpredictable if you go with any other combination besides container > row > span .

Ultimately if your code works, then you're doing okay. There is no reason to get locked into what other people have done. BUT if you change it up, make sure it's for a good reason, and that you comment the code everywhere to explain your thought process.