How to display a thumbnail in the hero unit with Bootstrap?

Question

On this page of the Bootstrap documentation, an example is provided demonstrating the "hero unit" which typically is placed at the top of a page and announces something important. I am trying to incorporate this into a page but I would like to also display a thumbnail beside it. Here is what I have:

<div class="hero-unit">
  <div class="thumbnail span3">
    <img src="http://placehold.it/260x180" alt="Sample Image">
  </div>
  <h1>Important Site Information</h1>
  <p>This paragraph contains important ... </p>
  <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>

This almost works but there is no gap between the thumbnail and the text:

Also, the image is overflowing the hero-unit div. I realize I can fix both issues with some inline styling:

<div class="hero-unit" style="overflow: auto;">
...
<div class="thumbnail span3" style="margin-right: 20px;">

However, inline styling really isn't ideal and I am hesitant to apply it site-wide by editing bootstrap.css. Is there a better way? I'm sure someone has run into this before.

Answer 1

You can nest grid elements. So just add another <div class="row-fluid"> (or <div class="row">) inside the hero unit, and then add two <div class="span..."> blocks with the appropriate percent of the overall grid column units.

Put the image in the left column, and the text in the right.