bootstrap offsetting without overrides - html

Question

Im new to bootstrap and have not used their grid system before. I am trying to use the full 12 grid and have one div 1-5 and one 8-12 so each div col-lg-5.
Im trying not to override there CSS much to keep it clean, I seem to have a problem with float:left. As far as i can tell from the documentation I am using the system correctly, but its not working, the second div drops to the next line.
MY CODE
<div class="row">
<div class="col-xs-6 col-lg-5 well well-lg">
<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>
</div>
<div class="col-xs-6 col-lg-5 col-lg-offset-7 well well-lg">
<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>
</div>
</div>

Answer 1

Your mistake is that you have two different .col-lg-5 divs in one row, and you added .col-lg-offset-7 class to the second one (5 + 5 + 7 = 17). However, the offset class should be .col-lg-offset-2 not to exceed the 12 columns grid system.
<div class="row">
<div class="col-xs-6 col-lg-5 well well-lg">
<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>
</div>
<div class="col-xs-6 col-lg-5 col-lg-offset-2 well well-lg">
<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>
</div>
</div>
Here are the other examples for you to understand how the grid system works:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>