CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Rob
Rob

Reputation: 1855

bootstrap columns sit on top eachother

Im a rookie with bootstrap. I'm trying to have the main content to the left and a side column to the right. For mobile view I want the right side column to go under the main content.

No matter what I try the side column is either directly ontop the main content column or it sits to the right but is still ontop of the main content column.

enter image description here

  <div class="col-sm-3 col-sm-offset-1">
      <div class="sidebar-module sidebar-module-inset">
        <h4>About</h4>
        <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
      </div>
      <div class="sidebar-module">
        <h4>Archives</h4>
        <ol class="list-unstyled">
          <li><a href="#">March 2014</a></li>
          <li><a href="#">February 2014</a></li>
          <li><a href="#">January 2014</a></li>
          <li><a href="#">December 2013</a></li>
          <li><a href="#">November 2013</a></li>
          <li><a href="#">October 2013</a></li>
          <li><a href="#">September 2013</a></li>
          <li><a href="#">August 2013</a></li>
          <li><a href="#">July 2013</a></li>
          <li><a href="#">June 2013</a></li>
          <li><a href="#">May 2013</a></li>
          <li><a href="#">April 2013</a></li>
        </ol>
      </div>
      <div class="sidebar-module">
        <h4>Elsewhere</h4>
        <ol class="list-unstyled">
          <li><a href="#">GitHub</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Facebook</a></li>
        </ol>
      </div>
    </div><!-- /.blog-sidebar -->

<!-- I'm using ruby on rails so 'yeild' is where the main content shows -->
 <div class="col-sm-9"> <%= yield %> </div>

This seems like a fairly common basic thing to do in bootsrap so its frustrating that I cant get it. Whats going wrong?

Here is a fiddle

Upvotes: 0

Views: 85

Answers (1)

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

This is the correct markup. Always wrap columns inside a row div. Also you were using an offset where it was not needed. Using col-xs-12 will take the whole width of mobile screen which will result the left side bar to go under it:

<div class="row">
<!-- I'm using ruby on rails so 'yeild' is where the main content shows -->
 <div class="col-sm-9 col-xs-12"> <%= yield %> </div>

<div class="col-sm-3 col-xs-12">
      <div class="sidebar-module sidebar-module-inset">
        <h4>About</h4>
        <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
      </div>
      <div class="sidebar-module">
        <h4>Archives</h4>
        <ol class="list-unstyled">
          <li><a href="#">March 2014</a></li>
          <li><a href="#">February 2014</a></li>
          <li><a href="#">January 2014</a></li>
          <li><a href="#">December 2013</a></li>
          <li><a href="#">November 2013</a></li>
          <li><a href="#">October 2013</a></li>
          <li><a href="#">September 2013</a></li>
          <li><a href="#">August 2013</a></li>
          <li><a href="#">July 2013</a></li>
          <li><a href="#">June 2013</a></li>
          <li><a href="#">May 2013</a></li>
          <li><a href="#">April 2013</a></li>
        </ol>
      </div>
      <div class="sidebar-module">
        <h4>Elsewhere</h4>
        <ol class="list-unstyled">
          <li><a href="#">GitHub</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Facebook</a></li>
        </ol>
      </div>
    </div><!-- /.blog-sidebar -->

</div>

Upvotes: 1

Related Questions