2

I am trying to build a responsive page with Bootstrap3. The problem that I'm having is that on smaller views(or with more than 1 line of content) my rightside column gets pushed underneath the other columns. I want it to stay on the right and shrink as needed.

Here's some HTML

<div class="container-fluid">
  <div class="row" id="row-for-buttons">
    <div class="col-xs-12  ">Full Width Scaling - This is persistant</div>
    <div id="for-the-buttons">
      <button id="sponsor">A Button</button><button id="donate">A Button Now</button><button id="new">A Button</button>
    </div>
  </div><!--- row --->


  <div class="row" id="main-site-row">
    <div class="col-xs-2" id="left-gutter">
      <ul>
        <li><a>Links</a>
        <li><a>Links</a>
        <li><a>Links</a>
        <li><a>Links</a>
        <li><a>Links</a>
        </ul>
    </div>
    <div class="col-xs-8" align="center" ><h2>The Main Stuff</h2>
      <div>
      Lom
    </div>
    <div class="picture">
      <img src="somwhere.jpg">
    </div>

      <div>
      Bacon ipsum dolor amet salami corned beef pastrami, picanha venison porchetta cupim beef rump cow doner.
      Landjaeger drumstick kevin, corned beef tri-tip ball tip cow ground round jowl short ribs pastrami jerky sausage
      capicola brisket. Hamburger andouille picanha tongue, biltong pastrami kielbasa short loin cupim capicola t-bone sausage
      strip steak. Salami flank pork loin meatball brisket sausage frankfurter boudin biltong short ribs pork chuck. Alcatra ground
      round pork belly, pork chop frankfurter fatback pork meatloaf corned beef ribeye. Turducken swine ball tip andouille capicola beef ribs tongue fatback.
</div>
<div>
  <button>A button</button>
  <button>A button</button>
</div>

    </div>
    <div class="col-xs-2" id="right-gutter">
      Bacon ipsum doloramet
    </div>
</div><!--- Row --->
</div>
3
  • Can you paste the CSS as well? Jul 11, 2016 at 19:56
  • Bootstrap should work correctly. It's most likely that problem is in CSS. Place your code in codepen so that it would be easier to help you with this.
    – exabyssus
    Jul 11, 2016 at 19:57
  • 1
    Please post this on a online code sharing/editing site like jsfiddle or codepen. Also provide a screenshot of what you see. Jul 11, 2016 at 20:02

1 Answer 1

3

Your markup looks to be invalid due to no closing tags for the list items <li> within </div id="left-gutter">.

With the markup issue resolved, and no custom styling applied, the result should be what you expect.

Working demo of your code with markup fixed

<div class="container-fluid">
  <div class="row" id="row-for-buttons">
    <div class="col-xs-12">Full Width Scaling - This is persistant
      <div id="for-the-buttons">
        <button id="sponsor">A Button</button>
        <button id="donate">A Button Now</button>
        <button id="new">A Button</button>
      </div>
    </div>
  </div>
  <div class="row" id="main-site-row">
    <div class="col-xs-2" id="left-gutter">
      <ul>
        <li><a>Links</a></li>
        <li><a>Links</a></li>
        <li><a>Links</a></li>
        <li><a>Links</a></li>
        <li><a>Links</a></li>
      </ul>
    </div>
    <div class="col-xs-8" align="center">
      <h2>The Main Stuff</h2>
      <div>
        Lom
      </div>
      <div class="picture">
        <img src="somwhere.jpg">
      </div>
      <div>
        Bacon ipsum dolor amet salami corned beef pastrami, picanha venison porchetta cupim beef rump cow doner. Landjaeger drumstick kevin, corned beef tri-tip ball tip cow ground round jowl short ribs pastrami jerky sausage capicola brisket. Hamburger andouille
        picanha tongue, biltong pastrami kielbasa short loin cupim capicola t-bone sausage strip steak. Salami flank pork loin meatball brisket sausage frankfurter boudin biltong short ribs pork chuck. Alcatra ground round pork belly, pork chop frankfurter
        fatback pork meatloaf corned beef ribeye. Turducken swine ball tip andouille capicola beef ribs tongue fatback.
      </div>
      <div>
        <button>A button</button>
        <button>A button</button>
      </div>
    </div>
    <div class="col-xs-2" id="right-gutter">
      Bacon ipsum doloramet
    </div>
  </div>
</div>
1
  • Thanks! That fix got the intended result! Jul 11, 2016 at 20:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.