title: How to display a thumbnail in the hero unit with Bootstrap?
body: <p>On <a href="http://twitter.github.com/bootstrap/components.html" rel="noreferrer">this page</a> 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:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="hero-unit"&gt;
    &lt;div class="thumbnail span3"&gt;
      &lt;img src="http://placehold.it/260x180" alt="Sample Image"&gt;
    &lt;/div&gt;
    &lt;h1&gt;Important Site Information&lt;/h1&gt;
    &lt;p&gt;This paragraph contains important ... &lt;/p&gt;
    &lt;p&gt;&lt;a class="btn btn-primary btn-large"&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This <em>almost</em> works but there is no gap between the thumbnail and the text:</p>
  
  <p><img src="https://i.stack.imgur.com/YGior.png" alt="enter image description here"></p>
  
  <p>Also, the image is overflowing the <code>hero-unit</code> div. I realize I can fix both issues with some inline styling:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="hero-unit" style="overflow: auto;"&gt;
  ...
  &lt;div class="thumbnail span3" style="margin-right: 20px;"&gt;
  </code></pre>
  
  <p><strong>However,</strong> inline styling really isn't ideal and I am hesitant to apply it site-wide by editing <code>bootstrap.css</code>. Is there a better way? I'm sure someone has run into this before.</p>