Search code examples
csstwitter-bootstraptwitter-bootstrap-rails

How to get Bootstrap's "hero-unit" to fit across the entirety of top section?


I am currently learning Rails and CSS, and am trying to replicate the look of Bootstrap's github page as a learning exercise. Bootstrap's central unit (purpleish colored, and contains the big header "Bootstrap") fits across all of the top of the page, having no white space on the side. However, my current attempt looks more like this example page where the central grey unit containing "hello world" is itself a box, and with white space surrounding it. Basically, my question is, how would I make that whitespace disappear? I have attempted to emulate what is shown in the page's source, but am still getting this outcome.

Thanks!


Solution

  • If you look in the source to the example page you posted, you will notice that the hero element is in a div called container. This class has a left and right margins assigned as well as width. All you need to do is change those to 0 and 100% respectively and you should be well on your way.