37

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.

Stickers
  • 75,527
  • 23
  • 147
  • 186
user2396285
  • 453
  • 2
  • 6
  • 7
  • Possible duplicate of [What is the purpose of .row in Bootstrap?](https://stackoverflow.com/questions/39960679/what-is-the-purpose-of-row-in-bootstrap) – Mistalis Jul 31 '17 at 11:53

3 Answers3

24

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!

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • Hey, thanks for clarifying this. I will definitely follow container > row > span then so that I do not land into miseries later. – user2396285 May 19 '13 at 19:44
  • So is it allowed/good practice to NOT use the row class when the positioning of the spans doesn't really matter that much? I'm building a dashboard which shows various items which aren't really related to eachother, and since the items appear dynamically based on the users access rights, I don't know how many spans will be created, so it would be easiest to ommit the row and just use 'container > spanX'. – Alex Aug 20 '13 at 08:54
  • @Alex, there's nothing to say you can't use the the row class, but it might give some unexpected results. See http://stackoverflow.com/questions/14318677/multiple-spans-per-row-in-twitter-bootstrap/14324482#14324482 for a similar question and one solution – David Taiaroa Aug 20 '13 at 12:01
  • 3
    Note that this answer is no longer correct in bootstrap v3. Besides the fact that col-* replaced span*, it is no longer good practice to use nested containers. – RonyK Oct 24 '14 at 18:07
23

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

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

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.

dclatzen
  • 51
  • 3