I am currently working on a project using Laravel Inertia Vue and bootstrap 5.2.2 as part of my dependencies.
After loading the css to the tag, I attempted to create a sticky footer. However, I found that the footer is not sticking to the bottom as expected.
Despite trying various solutions, the issue persists even after applying them to my code.
Here is my blade code:
<!DOCTYPE html>
<html class="h-100">
<head>
<meta charset="utf-8" />
<meta name="description" content="Website name" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
<link href="{{ asset('/css/offcanvas.css') }}" rel="stylesheet"/>
<script src="{{ mix('/js/app.js') }}" defer></script>
</head>
<body class="d-flex flex-column h-100">
@inertia
</body>
</html>
This is my components layout page:
<template>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
//Nav here
</nav>
</header>
<div class="nav-scroller bg-body shadow-sm">
<nav class="nav" aria-label="Secondary navigation">
<span class="nav-link">Please select a menu:</span>
<Link class="nav-link" v-for="(menu, index) in menus" :key="index" :href="`/page/${menu.id}`">{{
menu.name
}} </Link>
</nav>
</div>
<main class="flex-fill">
<div class="container">
<slot />
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</template>