title: Making Hero Unit in Bootstrap match my needs
body: <p>I am using Twitter Bootstrap, I am trying to make the Hero Unit the full height of the page and then they can click a button and it scrolls down further. I also want some text to display in the Hero Unit at the bottom of the Unit. </p>
  
  <p>I have added: <code>height: 100%;</code> and <code>vertical-align:bottom;</code> along with: <code>text-align:center;</code></p>
  
  <p>to the Hero Unit in the css file with no avail. It is almost seeming like you can't edit it :(  </p>
  
  <p>Here is the full CSS for the Hero Unit Class: </p>
  
  <pre><code>    .hero-unit {
    height: 100%;
    min-height: 649px;
    padding: 60px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
    color: inherit;
    background-color: #eeeeee;
    background-image: url('../img/blured.jpg');
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
  }
  
  .hero-unit h1 {
    margin-bottom: 0;
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
    color: inherit;
  }
  
  .hero-unit li {
    line-height: 30px;
  }
  </code></pre>
  
  <p>And the html for the Hero Unit: </p>
  
  <pre><code>&lt;!--HERO UNIT --&gt;
          &lt;div class="hero-unit"&gt; 
              &lt;div class="container-fluid"&gt; 
                  &lt;div class="row-fluid"&gt; 
                      &lt;div class="span4"&gt; 
                          &lt;h4&gt;The Green Panda&lt;/h4&gt; 
                      &lt;/div&gt;
                      &lt;div class="span4"&gt;
                          &lt;p&gt;Professional Web Design&lt;/p&gt; 
                      &lt;/div&gt;
                      &lt;div class="span4"&gt; 
                          &lt;a href="#professional" class="btn btn-primary btn-large"&gt;Learn More&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Am I missing something? If so what? I can't figure this out and do not understand why the height: 100% and vertical-align:bottom is not working. Any suggestions are open. <a href="http://jsfiddle.net/Khnz4/" rel="nofollow">Here is a fiddle</a></p>