title: Bootstrap Footer, Full Width Of Page
body: <p>i'm designing a website with joomla and using the bootstrap framework.
  Now i have a problem by my footer. Basically i use a simple grid layout and i want the content part of the site in the center of the page with space on the left and the right side which i already achieved.
  And now i want the footer not in the middle like the content but on the end of the page and over the whole width of it and NOT FIXED. So i want normally scroll down the page and at the end of it the footer shall appear with full width.
  I searched for it a long time but i don' find any solution that worked.
  I hope somebody can help me to achieve it...</p>
  
  <p>In the following are the scripts of the php-page and the css file i used</p>
  
  <p>index.php</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;jdoc:include type="head" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- main container --&gt;
      &lt;div class='container'&gt;
          &lt;!-- header --&gt;
          &lt;div class="mainMenuTop"/&gt;
          &lt;div class='row'&gt;
              &lt;jdoc:include type="modules" name="position-1" style="well" /&gt;
          &lt;/div&gt;
          &lt;div class='row'&gt;
              &lt;!-- main content area --&gt;
              &lt;div class='span12'&gt;
                  &lt;div class="article"&gt;
                      &lt;jdoc:include type="component" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- footer --&gt;
          &lt;div class='row'&gt;
              &lt;div class='span12'&gt;
                  &lt;div class='footer'&gt;
                  &lt;jdoc:include type="modules" name="footer" style="none" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>body 
  {
      overflow-y: scroll;
      background: url(../images/Test.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
   }
  
  .article
  {
      padding: 25px;
      margin-top: 30px;
      margin-bottom: 30px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255); /* The Fallback */
      font-size: 12pt;
      font-family:"Calibri", Times, serif;
  }
  
  .footer
  {
      height: 50px;
      border-top: solid 1px black;
  }
  </code></pre>
  
  <p>Kind Regards,
  oodoloo</p>