twitter bootstrap layout issues

Question

to start this is my first question and visit on stackoverflow and this will be my first time trying actually trying to program something.

i am having troubles with twitter bootstrap!

i don't know why the second row only has one paragraph on.

i can't upload the screenshot of the page, what should i do?

here is my code:

<div class="container">

  <!-- Main hero unit for a primary marketing message or call to action -->
  <div class="hero-unit">
    <h1>Hello, world!</h1>
    <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
  </div>

  <!-- Example row of columns -->
  <div class="row">
    <div class="span4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
   </div>
    <div class="span4">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div><!-- end row 1 -->

  <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div><! -- end row 2 -->

  <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="row">
    <div class="span3">
    <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div><!-- end row 2 --> 
  <hr>

Answer 1

Because that is exactly what you ask :

<!-- Example row of columns -->
<div class="row">
    <div class="span4">
    </div>
    <div class="span4">
    </div>
    <div class="span4">
    </div>
</div><!-- end row 1 -->

<div class="row">
    <div class="span3">
    </div>
</div><! -- end row 2 -->

<div class="row">
    <div class="span3">
    </div>
    <div class="row">
        <div class="span3">
        </div>
        <div class="row">
            <div class="span3">
            </div>
            <div class="row">
                <div class="span3">
                </div>
            </div><!-- end row 2 --> 

also, you need more

</div>

Your confusion come from the fact that all your row are the same

give each row a specific name (Header1, header2...) and you will see exactly what is wrong

Answer 2

It's simple problem, you actually have more rows than you think you do:

From the sounds of things, you want two top level rows (ie rows that stretch the entire width of the container div)

Here's a stripped down version of what you have actually got (note: I remove hero unit and content for clarity):

<div class="container">

  <!-- start of first row -->
  <div class="row">
    <div class="span4">
    </div>
    <div class="span4">
    </div>
    <div class="span4">
    </div>
  </div><!-- end of first row -->

  <!-- start of second row -->
  <div class="row">
    <div class="span3">
    </div>
  </div><!-- IMPORTANT: This closing div actually closes your second row -->

  <!-- start of third row, IMPORTANT: you have failed to close this div -->
  <div class="row">
    <div class="span3">
    </div>
    <!-- start of fourth row, IMPORTANT: you have failed to close this div -->
    <div class="row">
      <div class="span3">
      </div>
      <!-- start of fifth row, IMPORTANT: you have failed to close this div -->
      <div class="row">
        <div class="span3">
        </div>
        <!-- start of sixth row, IMPORTANT: you HAVE closed this div -->
        <div class="row">
          <div class="span3">
          </div>
       </div><!-- you have erroniously identified this closing div as being the end of row 2, when it is actually the end of row 6 --> 
    <!-- IMPORTANT: you fail to close the container in your posted code -->

As you can see, you've got your divs a bit mixed up.

It's important to note that row 2 ends abruptly. If you want stuff from row three onwards to appear inside your second row, then you need to move code into the div containing it.

Something like this: might help more:

<div class="container">

  <!-- start of first row -->
  <div class="row">
    <div class="span4">
    </div>
    <div class="span4">
    </div>
    <div class="span4">
    </div>
  </div><!-- end of first row -->

  <!-- start of second row -->
  <div class="row">
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
    <div class="span3">
    </div>
  </div><!-- end of row 2 -->
</div><!-- IMPORTANT: don't forget to close the  container -->

This will give two rows, with the first one containing 3 spans, and the second one holding 4.