Geek Answers Handbook

How to display a thumbnail in a block of heroes using Bootstrap?

In this page Bootstrap documentation is an example showing "character block", which is usually placed at the top of the page and announce something important. I am trying to include this in a page, but I would also like to show a thumbnail next to 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>

It almost works, but there is no gap between the thumbnail and the text.

enter image description here

In addition, the image overflows the div hero-unit. I understand that I can fix both problems with some inline style:

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

However, the inline style is really not perfect, and I hesitate to apply it on the site while editing bootstrap.css. Is there a better way? I'm sure someone has come across this before.

+5
1

. <div class="row-fluid"> ( <div class="row">) , <div class="span..."> .

, .

+9

More articles:


All Articles