How to display two columns in a hero unit with Bootstrap?

Question

I am trying to get bootstrap's rows to work inside of a hero-unit. I tired following this example How to display a thumbnail in the hero unit with Bootstrap? but it doesn't appear to work. I only get 1 column in the hero. My guess is that the padding is causing the columns to wrap because it appears to align correctly when setting padding to 0, but I'm not sure how to work around that correctly.

<div class="hero-unit" style="padding: 15px;">
    <div class="page-header">
        <h2>
            Example Page Header
            <small>Example Sub Header</small>
        </h2>
    </div>

    <div class="row">
        <div class="span4">
            <img src="http://placehold.it/360x268" alt="">
        </div>

        <div class="span8">
            test
        </div>
    </div>
</div>

Answer 1

Alex,

If you're using the bootstrap-responsive.css, or the fluid template, then you apply the following markup.

  <div class="hero-unit">
    <div class="row-fluid">
        <div class="columnA pull-left">
             <h2>Column A</h2>
            <img src="http://placehold.it/500x300.png"/>
        </div>

        <div class="columnB pull-right">
             <h2>Column B</h2>
            <img src="http://placehold.it/500x300.png"/>
        </div>

    </div>
  </div>

Then insert the following style in the head.

  .columnA,
  .columnB{
    width: 500px;

  }

The codes above shall output a document similar to the image below:

Answer 2

You can use spans that add up to 11 (instead of 12). No extra css is necessary:

<div class="hero-unit">
    <div class="row">
        <div class="span8"> column A </div>
        <div class="span3"> column B </div>
    </div>
</div>