I've read the different posts here asking for footer help; but unfortunately I do not see anything here that have worked in assisting me.
I am building a web app where I am trying to fix the footer to the bottom of the page without overlapping my nav bar (Orange bar) on the left hand side.
Currently my page and code are:
<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 fixes; but then the footer floats to the top of the page like so:
I have also attached my end goal image; I have blocked out the personal content. End Goal I have tried:
- Position relative with Bottom 0
- margin left (although moves footer over; it screws up when looking at mobile view where there should be no margin. (wasn't sure if I should do a media query and use this option)
- Position Absolute with mb-0
- Other ideas, but cannot recall what I have tried.
I am building this app in Blazor with Bootstrap 4.5.2
Thanks everyone for the assistance. I've been googling and trying for past 2 hours with on success.