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 fu

Answer 1

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; } }

Answer 2

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>