Pie de página de Bootstrap, ancho completo de página

Estoy diseñando un sitio web con Joomla y usando el framework bootstrap. Ahora tengo un problema con mi pie de página. Básicamente, uso un diseño de cuadrícula simple y quiero que la parte del contenido del sitio esté en el centro de la página con espacio en el lado izquierdo y derecho que ya he logrado. Y ahora quiero que el pie de página no esté en el medio, como el contenido, sino al final de la página y en todo el ancho, y NO FIJO. Por lo tanto, normalmente quiero desplazarme hacia abajo de la página y al final de la misma aparecerá el pie de página con todo el ancho. Lo busqué durante mucho tiempo pero no encuentro ninguna solución que funcione. Espero que alguien pueda ayudarme a lograrlo ...

A continuación se encuentran los scripts de la página php y el archivo css que utilicé

index.php

<!DOCTYPE html>
<html>
<head>
    <jdoc:include type="head" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- main container -->
    <div class='container'>
        <!-- header -->
        <div class="mainMenuTop"/>
        <div class='row'>
            <jdoc:include type="modules" name="position-1" style="well" />
        </div>
        <div class='row'>
            <!-- main content area -->
            <div class='span12'>
                <div class="article">
                    <jdoc:include type="component" />
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class='row'>
            <div class='span12'>
                <div class='footer'>
                <jdoc:include type="modules" name="footer" style="none" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

style.css

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

Saludos cordiales, oodoloo

Respuestas a la pregunta(3)

Su respuesta a la pregunta