Full Width Hero Unit In Twitter Bootstrap

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

Solution 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:

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

use:

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

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