Footer in bootstrap

Question

I am trying to make web responsive flexible footer in bootstrap, which will be at bottom of page (if content is less at bottom of page and if content increase then change accordingly). This is my code that i am using. What am i missing or doing wrong. Beginner to bootstrap and using version 4.5.0. Thank you in advance

   <footer class="footer">
       <div class="container-fluid">
          <ul class="footertext">
                <li class="list">
                    About Us
                </li>
                <li class="list">
                    Contact Us
                </li>
            </ul>
             


         </div>
   </footer>

This is my css

 .footer {
        position: absolute;
        bottom: 0;
        width: 100%;    
        background-color: black;
    }

this is the scrrenshot when i try to see it in one particular size. The fotter doesnot get long enough to fit the screen. But when its in another screen its fine

my footer is inside this div which doesn't have full screen width when i inspect page. i tried adding min-width to 100% and 100vh also

 .page-container {
position: relative;
min-height: 100vh;
/*min-width: 100%;*/

}

Can you show a screenshot of the result you're getting and explain what you want to get using that shot — Qudusayo, Nov 23 '20 at 20:50
I have edited the description to show screenshot and few more details if it helps. — testguest, Nov 23 '20 at 21:36
After inspecting the element the footer is in, does the element takes the full width of the screen ? And if yes, you're setting a div in your footer, does the div too takes the full width of the footer — Qudusayo, Nov 24 '20 at 07:05

score 1 · Answer 1 · answered Nov 24 '20 at 04:58

You can use bootstrap inbuilt class d-flex flex-column min-vh-100 for your main container and mt-auto means margin-top auto to your footer. So your footer will always be at the bottom of the page respective to the content. Below is the snippet for the same

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid d-flex flex-column min-vh-100 text-center">
  <section>
    <h1>My content</h1>
  </section>
  <footer class="mt-auto text-light bg-dark pt-2 pb-2">footer</footer>
</div>

Footer in bootstrap

1 Answers1