Bootstrap Footer, Full Width Of Page
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...
In the following are the scripts of the php-page and the css file i used
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;
}
Kind Regards, oodoloo
Answer
You can put your footer to separate <div class="container"> after the main content container. Then you can assign a container class which does not limit the width of the footer, like happens with main content. E.g.::
<div class="container">
...
</div>
<div id="footer" class="container-fluid">
<div class="row">....</div>
</div>