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.