Full width hero unit in Twitter Bootstrap

html, twitter-bootstrap

Solution

move your `.hero-unit` div outside of your `.container` div.

the `.container` style confines you to a set width. and anything inside it will have a maximum width of it's parent. instead of:

<div class="container">
   <div class="hero-unit">
   </div>
</div>

use:

<div class="hero-unit">
</div>
<div class="container">
</div>

Problem

In this example layout I want only hero unit to be 100% wide and rest within the default grid. For example, check this site. It has only the hero unit part (showcase area) in full width and rest in fixed width (navigation, bottom content, footer). I need to do this without losing responsive design feature.

Original source