Question

I’m using Twitter Boostrap and the grid system that comes with it.
For my #stories div, i want to move it to the right of the page so it’s vertically parallel to the “welcome” div.

I’ve followed the nesting rules in the Boostrap reference (scaffolding section) and laid out my code based on their guide, but cant get the content for the stories div to appear as a column on the right.

What I might be doing wrong?

Code below, but also a link at the bottom to the full page.

<div class="row">


        <!-- welcome container -->
        <div class="span8" id="welcome">
            <h1>Storify</h1>
            <div id="StoryActions">

            <div>

                <a href="#" class="btn btn-success .btn-large" id="BtnCreateStory">
                    <div id="NewStoryBtn">
                        <span id="create">CREATE</span><p id="newstory">New Story</p>
                    </div>
                </a>



                <a href="#" class="btn" id="BtnJoin">
                    <div id="JoinStoryBtn">
                        <span id="create">JOIN</span><p id="newstory">Existing Story</p>
                    </div>
                </a>

                <p id="registration">no registration required</p>



                <div id="StoryDescription">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                <p>Storify is a <strong>fun</strong>, group <strong>writing game</strong> 
                taking inspiration from the story writing game that you may have played at a party or at school with friends.</p>

                <p>Each person writes a random sentence to form part of a story.</p>

                <p>Once the story is complete, one person reads out the whole story, and usually everyone breaks into laughter.</p>
                <p>Storify is great for playing with your Internet friends or Co-workers.</p>
                </div>

            </div>

            </div>

    <div class="row">

        <div class="span6">

                <!-- Running Stories -->
                <div class="span3">&nbsp;</div>

                <div class="span3">
                    <div id="stories"> 
                    I want to write a really long story here and see how far it goes down the path
                    </div>
                </div>

        </div>


    </div>

Answer 1

The Bootstrap grid system utilizes 12 cloumns, which means that in every row you design, the sum of columns inside row at the topmost level should equal 12 or less. The sum of columns in the nested rows should equal to the sizes of the columns where the rows are nested.

The simplified scheme of your example is like this:

<div class="row">
  <!-- welcome container -->
  <div class="span8" id="welcome">
    ...
  <div class="row">
  <div class="span6">
    <!-- Running Stories -->
      <div class="span3">&nbsp;</div>

      <div class="span3">
        <div id="stories"> 
          I want to write a really long story here and see how far it goes down the path
        </div>
      </div>
  </div>
</div>

There are several mistakes.

1. span8 div is not properly closed. Instead of it’s closing tag, there is a redundant row div.
2. The sum of columns at the topmost level is 14 (span8 + span6) which is too much.
3. The two nested columns span3 are not closed in another row.

Here is the fixed version, where I have reduced right column to span4 so the sum would equal 12. Likewise I have reduced the sizes of the nested columns.

<div class="container">

    <div class="row">

        <!-- welcome container -->
        <div class="span8" id="welcome">
            <h1>Storify</h1>
            <div id="StoryActions">

            <div>

                <a href="#" class="btn btn-success .btn-large" id="BtnCreateStory">
                    <div id="NewStoryBtn">
                        <span id="create">CREATE</span><p id="newstory">New Story</p>
                    </div>
                </a>



                <a href="#" class="btn" id="BtnJoin">
                    <div id="JoinStoryBtn">
                        <span id="create">JOIN</span><p id="newstory">Existing Story</p>
                    </div>
                </a>

                <p id="registration">no registration required</p>



                <div id="StoryDescription">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
                <p>Storify is a <strong>fun</strong>, group <strong>writing game</strong> 
                taking inspiration from the story writing game that you may have played at a party or at school with friends.</p>

                <p>Each person writes a random sentence to form part of a story.</p>

                <p>Once the story is complete, one person reads out the whole story, and usually everyone breaks into laughter.</p>
                <p>Storify is great for playing with your Internet friends or Co-workers.</p>
                </div>

            </div>

            </div>

        </div>

        <div class="span4">

           <div class="row">
                <!-- Running Stories -->
                <div class="span2">&nbsp;</div>

                <div class="span2">
                    <div id="stories"> 
                    I want to write a really long story here and see how far it goes down the path
                    </div>
                </div>
           </div>
        </div>

</div>