Hello, I have been browsing through various discussions seeking help with my footer issue, but unfortunately, I haven't found a solution that works for me.
Currently, I am working on a web app and struggling to keep the footer at the bottom of the page without overlapping my navigation bar (Orange bar) on the left side.
Here is how my page and code look like:
<div class="container-fluid">
<div class="HeaderBar row">
<div class="col-md-12">
<img src="images/systemslogo.png" />
</div>
</div>
<div class="FeatureBar row">
<div class="col-md-12">
<p>Welcome</p>
</div>
</div>
<div class="row min-vh-100">
<div class="navbar col-md-1" style="background-color: #f78a00;">
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<AlertSuccess/>
@Body
</div>
</div>
<div class="row fixed-bottom" style="background-color: #CCCCCC;">
<div class="col-md-12">
<p>Footer</p>
</div>
</div>
</div>
</div>
</div>
If I remove the "fixd-bottom", the footers width fits, but then the footer moves to the top of the page as shown here:
I have also shared an image of my end goal, with personal content blocked out. End Goal I have attempted:
- Position relative with Bottom 0
- margin-left (although it shifts the footer; causing issues in mobile view where there should be no margin. Perhaps a media query could resolve this)
- Position Absolute with mb-0
- Other strategies, but I can't recall all that I've tried.
My app is being developed in Blazor with Bootstrap 4.5.2
Thank you to everyone for your help. I've spent the last 2 hours searching and experimenting with no success.