I've got a Blade main template like this that allows me to use a single template to house a number of different containers like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>
@yield('title')
</title>
@include('libs.libs')
@include('google.analytics')
</head>
<body>
@include('partials.nav_sched')
<div class="container">
@yield('content')
</div>
@yield('schedule')
</body>
<div class="panel-footer navbar-bottom">
@include('partials.footer-sched')
</div>
</html>
@include('js.libs')
@include('js.add-class')
The problem with this is, my footer is way up in the middle of the page:
This is my partials/footer-sched
:
<div class="container">
<p class="text-muted text-center">
Made with ♥ by Drexel Students for Drexel Students
</p>
<h6 class="text-muted text-center">
<small>
<a href="http://www.contact.com/contact-me/">Contact Me</a>
</small>
</h6>
</div>
I tried numerous things such as taking the footer out of the main body, using custom CSS:
.panel-footer{
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
background-color: #ffffff;
}
I just have been unable to have the footer at the bottom of the page. I don't want a sticky footer, but I just want a footer that stays at the bottom of the page.
navbar-fixed-bottom
, doesnt that wor for you? getbootstrap.com/components/#navbar-fixed-bottomdiv
outside of yourbody
tag?