HTML Content over flowing bootstrap containers

Question

I have a page with some bootstrap wells: http://jsfiddle.net/LmwbkLo6/

<div style="margin:15px;">

  <br>

  <div class="well">

    <div class="col-sm-8">

      <h4>Test Title</h4>

      <p>Some test text</p>

      <p>More text..</p>

    </div>

    <div class="col-sm-4">

    </div>

    <p>And Some Text Here

      <p>

  </div>

</div>

Im having an issue with the content overflowing the parent containers.

For Example, the content here is overflowing the Well div. I can "fix" this by adding

class="col-xs-12"

to the Well Div, but then the div itself will overflow the outer div.

Does anyone have any Ideas?

Answer 1

You need to wrap your class="col-* divs in <div class="row"></div> or it will not apply the negative margin.

HTML Content over flowing bootstrap containers

Sign up