Bootstrap 4: Footer not at bottom

前端未结

关注

 3  1303

梦谈多话

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:

相关标签:

3条回答

陌清茗

2020-12-09 20:09
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...
庸人自扰

2020-12-09 20:12
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

渐次进展

2020-12-09 20:20

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/

0 讨论(0)