Search code examples
laravelbootstrap-4sticky-footer

create a sticky footer with Bootstrap 4 classes using Laravel

I want to create a sticky footer using Laravel 6 and Bootstrap 4. I tried to create it but I failed. These are my files:

layout.blade.php:

<body>
    @auth
        @include('../inc/navbar')
    @endauth
    <div class="container" id="app">
        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
            @csrf
        </form>
        @yield('content')
    </div>
    @auth
        @include('../inc/footer')
    @endauth
</body>

footer.blade.php:

<nav class="navbar fixed-bottom bg-custom justify-content-end">
    <b>Powered by Me</b>
</nav>

app.scss

body {
    background-color: rgb(241, 230, 131);
  }

nav {
    height: 50px;
    background-color: rgb(131, 215, 241);
}

I tried using the fixed-bottom class but in this way the footer remains always in the same position at the bottom of the screen even if the user scrolls a page with a lot of content. Can someone help me?

Solution

  • See the code below! Happy 2020!

       //style
        body {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
       }

       main {
          padding-top: 100px;
       }

       footer {
           margin: auto auto 0 auto;
       }


      //html
        <html>
          <body>
             <header>
               <nav>..</nav>
             </header>
             <main>
               <p>Lorem ipsum dolor sit amet!</p>
             </main>
             <footer></footer>
          </body>
        </html>