Full width hero unit in Twitter Bootstrap

Question

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.

Answer 1

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>

Answer 2

Well the answer is right but whenever you resize the site, hero-unit will then change to have spaces around (20px right, 20px left) because all the elements are bound to this body has paddings in @media max-width: 767px. Just do the code below to fix it too:

@media (max-width: 767px) { .hero-container { margin-right: -20px; margin-left: -20px; } }