Twitter Bootstrap Question posted in

Bootstrap 4: Footer not at bottom-Twitter bootstrap

I know this question was probably asked some hundred times, but sadly no answer that I found in here really helped me.

I tried these answers for example:

But I still have the problem that when my page content is to “small” and doesn’t fill out the whole height of the body/page container the footer just floats somewhere above the end of the browser window.

This is the code for my footer:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<footer class="d-flex justify-content-center">
  <div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
    <div class="align-left">
      <a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
      <a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
      <a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
    </div>
    <div class="align-right small">
      Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
    </div>
  </div>
</footer>

I’m using Bootstrap 4.1 and Chrome, here’s also a codepen to my site:

https://codepen.io/anon/pen/oMZVxq

Note: you have to use the sidebar view in codepen to actually see that the footer is not at the bottom, as the view size in codepen is so small that it looks correctly.

Tags:

4

Answers


  1. 0

    First add display: flex; and flex-direction: column; to #page-container.

    Now you have “set the stage” for aligning the footer to the bottom. Set its margin-top to auto (by adding the class mt-auto) and you are done;

    <div class="d-flex justify-content-center mt-auto">
 Content here
</div>

    See this codepen.

    Login or Signup to reply.
  2. 0

    You can use built-in bootstrap class to achieve this.

    What you need is the container to be a column flex container . class to use are : d-flex flex-column

    To set the container to height:100% you can apply the class h-100to html, body and the container or add to the container style height:100vh;

    For the footer, a margin-top:auto will do, the class to use is : mt-auto;

    example below to run in full page mode

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>




<html class="h-100">
    <body class="h-100">
        <!-- Page Container -->
        <div id="page-container" class="container-fluid pr-0 pl-0 h-100 d-flex flex-column">
            <!-- Header -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light pt-3 pb-3 d-flex justify-content-center">
                <div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 d-flex justify-content-between">
                    <div class="d-flex justify-content-start align-items-center">
                        

<a href="/" class="kf-links">
    
        <span class="h5">
            <i class="fas fa-paper-plane"></i>
            <span class="h4 font-weight-bold kf-dark">
                MyPage
            </span>
        </span>
    
</a>
                    </div>
                    <!-- Main Header Navigation -->
                    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a href="/" class="nav-link ">Link1</a>
                            </li>
                            <li class="nav-item">
                                
                                <a href="" class="nav-link ">Link2</a>
                            </li>

                            
                                <li  class="nav-item">
                                    
                                    <a href="" class="nav-link ">Link3</a>
                                </li>
                            

                            
                        </ul>
                    </div>
                    <!-- END Main Header Navigation -->
                </div>
            </nav>
            <!-- END Header -->

            <!-- Main Container -->
                
                    <div style="background:#5c90d2">
                        <div class="col-md-12 text-center pt-5 pb-5">
                            <div class="pt-5 pb-5">
                                <h1>
                                    <span class="main-text">
                                        Login
                                    </span>
                                </h1>
                                <p class="lead"><span class="main-text">
                                            Login Now!
                                        </span></p>
                            </div>
                        </div>
                    </div>
                

                <!-- Content -->
                
        <div class="d-flex justify-content-center fadeIn">
            <div class="col-md-8 col-xs-12">
    <div class="d-flex justify-content-center">
        <div class="col-md-6 pt-5 pb-5 pr-0 pl-0">
            <form class="form-horizontal" method="post">
            <div class="form-group">
                <div class="col-xs-12">
                    <div class="">
                        <label for="id_username">E-Mail</label>
                        <input id="id_username" class="form-control" maxlength="254" name="username" value="" type="text" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-12">
                    <div class="">
                        <label for="id_password">Password</label>
                        <input id="id_password" class="form-control" name="password" type="password" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-12">
                    <small class="float-right">
                        <a href="#" class="kf-links">Forgot Password?</a>
                    </small>
                </div>
            </div>
            <div class="form-group mt-5">
                <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 pl-0">
                    <button class="btn btn-sm btn-block btn-primary" type="submit">Login</button>
                </div>
            </div>
        </form>
        </div>
    </div>

            </div>
        </div>

                <!-- END Content -->

            <!-- END Main Container -->

            <!-- Footer -->
            <footer class="d-flex justify-content-center mt-auto">
                <div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
                    <!-- Copyright Info -->
                        <div class="align-left">
                            
                                <a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
                            
                            <a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
                            <a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
                        </div>
                        <div class="align-right small">
                            Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
                        </div>
                    <!-- END Copyright Info -->
                </div>
            </footer>
            <!-- END Footer -->
        </div>

        <!-- END Page Container -->
    </body>
</html>

    codepen updated https://codepen.io/anon/pen/PBpgNN

    reminder for boostrap classes https://getbootstrap.com/docs/4.5/utilities/flex/ about sizing see https://getbootstrap.com/docs/4.5/utilities/sizing/

    Login or Signup to reply.
  3. 0

    If you want a fixed footer, just add the class fixed-bottom to the footer tag like shown below.

    <footer class="fixed-bottom bg-dark">    
    <div class="text-center">
        <p>Footer</p>
    </div>
</footer>
    Login or Signup to reply.
  4. 0

    So this helped me – if someone is still looking for an answer:

    on your <HTML>, <body> and your container div add a class h-100 and your footer will stay on the bottom.

    Important

    One thing I did to remove the extra height is that on my container div I changed the h-100 styling to height: calc(100% - 200px) !important; (where -200px was the height of my navigation and footer)

    if you are not using the bootstrap, here is the styling .h-100{height:100% !important}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search