Level 75
Put the footer in your layout file.
Mar 17, 2020
9
Level 7
Footer not sticking to the bottom of page
I am trying to have a footer display at the bottom of a webpage. While trying various options, the footer ends up replacing the menu bar, other times is fixed in the middle of the page. I will get it to work on one webpage but not the other. I am using Laravel, TailwindCSS, HTML. Any idea how to fix this? Or any resources you can point me towards?
Form Layout
<footer>
<div class="flex justify-center bg-gray-800 h-18 pt-4 pb-4 fixed w-full">
<a href="https://paolotrulli.com" class="text-white hover:text-blue-800 m-2 "><img class="h-10 w-10"
src="/images/global.svg"></a>
<a href="https://twitter.com/p_trulli" class="text-white hover:text-lue-800 m-2"><img class="h-10 w-10"
src="/images/twitter-black.svg"></a>
<a href="https://github.com/PT-83" class="text-white hover:text-blue-800 m-2"><img class="h-10 w-10"
src="/images/github.svg"></a>
<p class="text-white pt-4">Copyright 2020, Paolo Trulli</p>
</div>
</div>
</footer>
Homepage example
@extends('layout')
@section('title', 'Blog')
@section('content')
<div class="bg-gray-700 text-center text-gray-700 h-screen text-lg">
<h3 class='text-gray-300 pt-6 text capitalize'>A place where I create posts on random things that interest me</h3>
<div class="pt-6">
<form action="/blog" method="post">
</div>
<label class=""></label>
<input type="text" name="title" autocomplete="off">
@csrf
<div class="text-center pt-6">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded justify-center">
Add Blog Post</button>
</div>
</form>
<p style="color: red">@error('title') {{ $message }} @enderror</p>
<ul>
@forelse ($blogs as $blog)
<li>{{ $blog->title }}</li>
@empty
<li>
<h3 class="text-center pt-4 text-red-500">No Blog Posts Yet</h3>
</li>
@endforelse
</ul>
</div>
</div>
@include('footer')
@endsection
Layout file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>
<title>@yield('title')</title>
</head>
<html>
<body>
<div class="absolute inset-x-0 top-0">
<nav x-data="{ open: false }" @keydown.window.escape="open = false" class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center h-24">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="/images/startup.svg" alt="icon" />
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
<a href="/home"
class="px-4 py-2 rounded-md text-lg font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="po"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="ml-4 px-3 py-2 rounded-md text-lg font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button @click="open = !open"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div :class="{'block': open, 'hidden': !open}" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3">
<a href="/home"
class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
<a href="/contact"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
<a href="/blog"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
<a href="#"
class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="/images/0.jpeg" alt="My Picture" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Paolo Trulli</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">[email protected]</div>
</div>
</div>
</div>
</nav>
@yield('content')
</body>
Level 7
Level 75
Header
Yield content
Footer
Level 2
Registration
<!-- MATERIAL DESIGN ICONIC FONT -->
<!-- STYLE CSS -->
<link rel="stylesheet" href="{{asset('assets/login/css/loader.css')}}">
<link rel="stylesheet" href="{{asset('assets/login/css/style.css')}}">
<div id="content">
@yield('content')
</div>
<!-- core:js -->
<script src="{{asset('assets/login/js/jquery-3.3.1.min.js')}}"></script>
<!-- JQUERY STEP -->
<script src="{{asset('assets/login/js/jquery.steps.js')}}"></script>
<script src="{{asset('assets/login/js/main.js')}}"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="{{asset('assets/js/notify.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/notify.js')}}"></script>
<!-- Template created and distributed by Colorlib -->
<!-- endinject -->
<!-- end custom js for this page -->
<script type="text/javascript">
document.onreadystatechange = function () {
document.getElementById('content').style.visibility="hidden";
setTimeout(function(){
// document.getElementById('interactive');
document.getElementById('preloader').style.visibility="hidden";
document.getElementById('content').style.visibility="visible";
},2000);
}
</script>
@yield('footercontent')
then in your blade add like this
@extends('layouts.header')
@section('content')
<div class="page-content">
</div>
@section('footercontent')
$("#set_m").on('click',function(){ var id=$("#auth_id").val(); if(!$("#set_maintenance").valid()){ return false; } $.ajax({ url: "{{ route('create_charges') }}", method: 'post', data:$("#set_maintenance").serialize() + "&_token={{csrf_token()}}", success: function(data){ $.each(data.errors, function(key, value){ $.notify(value,"error"); }); if(data.success){ $.notify("Account data successfully Updated","success"); $("#set_maintenance")[0].reset(); } } }); });Level 122
@jeevamugunthan if you are to truly help, please take care to format your reply
1 like
Level 2
@snapey haa..haaa.. yeah sure i tried many times it was not aling properly sorry for this
Level 122
@jeevamugunthan its easy, just put three backticks ``` on their own line before and after your code
Level 2
@snapey ok thankyou for your information
Please or to participate in this conversation.