Bootstrap footer at the bottom of the page

Question

I have read a lot of posts about this but I still didn't find an answer. I have a footer that I want to be at the end of the page, not fixed. The problem is that the footer is where the content ends. Look at picture.

This is my HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Mobtech - Privatni korisnici </title>

        <!--Ubaci bootstrap css -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="css/basic-template.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

    </head>
    <body>
        <!--Navigation bar -->
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
                        <span class="sr-only"> Pokazi i sakrij navigaciju </span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">
                         <span> <img src="Slike/logo.png" alt="LogoSlika"/> </span>
                        <font face="Roboto Condensed" size="4" color="green"> Mobtech </font>
                    </a>
                </div> 
                <div class="collapse navbar-collapse" id="navbar-container">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="index.html"> Početna strana </a> </li>
                        <li class="active"><a href="#"> Privatni korisnici </a> </li>
                        <li><a href="poslovni.html"> Poslovni korisnici </a> </li>
                        <li><a href="uredjaji.html"> Uređaji </a> </li>
                        <li><a href="onama.html"> O Nama </a> </li>
                    </ul>
                </div>
            </div>
        </nav>

        <br />
            <div class="container"> <!--Container -->

                <div class="row">
                    <!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
                    <div class="col-lg-12 bg-success"> 
                        <p> Outer div </p>
                        <div class="col-lg-6 bg-primary">
                            <p> Inner div </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <footer class="mojFooter">
                <font face="Roboto Condensed" size="4"> <center>
                <div class="container">
                    <div class="row" style="margin-top: 7px;">
                         <p> &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &copy; Copyright Ivan Prošić 2016.</p> 
                    </div>
                    <div class="bottom-footer">
                        <div class="col-md-12"> 
                            <ul class="footer-nav">
                                <li> <a href="https://www.facebook.com/"> Facebook </a> </li>
                                <li> <a href="https://twitter.com/"> Twitter </a> </li>
                                <li> <a href="https://plus.google.com/"> Google+ </a> </li>
                            </ul>
                        </div>
                    </div>
                </div>
                </font> </center>
            </footer>



            <!-- JavaScript fajl -->
            <script src="js/jquery.min.js"></script>
            <!-- Kompresovan JavaScript fajl -->
            <script src="js/bootstrap.min.js"></script>
    </body>
</html>

This is my CSS, for the footer only:

    .mojFooter{
    background-color: #f8f8f8;
    color: #00a651;
    padding-top: 0px;
    border-top: 1px solid #e7e7e7;
    margin-bottom: 0px;
}

.bottom-footer{
    border-top: 1px solid #00a651;
    margin-top: 0px;
    padding-top: 7px;
    color: #00a651;

}

.footer-nav li{
    display: inline;
    padding: 0px 40px;
}

.footer-nav a{
    color: grey;
    text-decoration: none;
}

so in other words, you want the footer to be at the end of the page, not fixed, EXCEPT if the content is shorter than the browser window, then you want it to be fixed to the bottom of the page? — andi, Nov 28 '16 at 21:46
You have my answer here http://stackoverflow.com/a/24916228/1804107 — Aleksandar, Nov 28 '16 at 21:53

luke · Answer 1 · 2020-11-19T08:55:08.457

152

When using bootstrap 4 or 5, flexbox could be used to achieve desired effect:

<body class="d-flex flex-column min-vh-100">
    <header>HEADER</header>
    <content>CONTENT</content>
    <footer class="mt-auto"></footer>
</body>

Please check the examples: Bootstrap 4 Bootstrap 5

In bootstrap 3 and without use of bootstrap. The simplest and cross browser solution for this problem is to set a minimal height for body object. And then set absolute position for the footer with bottom: 0 rule.

body {
  min-height: 100vh;
  position: relative;
  margin: 0;
  padding-bottom: 100px; //height of the footer
  box-sizing: border-box;
}

footer {
  position: absolute;
  bottom: 0;
  height: 100px;
}

Please check this example: Bootstrap 3

edited Nov 19 '20 at 08:55

answered Nov 28 '16 at 21:56

luke

3,531
1
26
46

4

You can optionally give the body a `padding-bottom` with the height of the footer to prevent the footer from hiding content at the bottom of the body. – redelschaap May 09 '18 at 07:51
@MrMiketheripper, it works for the original requirement - footer needs to be "at the end of the page, not fixed". – luke Oct 21 '18 at 20:29
1

I have spent the whole day looking for a proper solution and finally found it. Thanks, man! – Petro Franko Nov 28 '21 at 18:56

Robert Beckson · Answer 2 · 2020-03-21T07:27:31.670

49

In my case for Bootstrap4:

<body class="d-flex flex-column min-vh-100">
    <div class="wrapper flex-grow-1"></div>
    <footer></footer>
</body>

edited Mar 21 '20 at 07:27

answered Mar 20 '20 at 19:28

Robert Beckson

591
4
4

4

Upvoting because this uses bootstrap and doesn't require additional CSS – david_nash May 16 '20 at 22:17
awesome really worked. But note when using laravel remove the
it also works fine without the wrapper class. – Alemoh Rapheal Baja Sep 07 '20 at 15:43
My body was acting weird when I uncollapsed my accordion.. The flex-grow class actually helped me out by making it fill all the available space, thanks ! – uwponcel Nov 12 '20 at 03:08
I have no idea why but I'm using hugo and while this looks like a fairly amazing solution, it won't work for me bootstrap 4. – NFL Nov 25 '20 at 17:08
I had having problem with `h-100` and `min-vh-100` solve my problem, thanks – Tayyab Hayat Dec 20 '21 at 05:08

score 4 · Answer 3 · edited Mar 29 '22 at 14:28

4

You can just add:

style="min-height:100vh"

to your page content container and place the footer in another container

edited Mar 29 '22 at 14:28

DᴀʀᴛʜVᴀᴅᴇʀ

7,681
17
73
127

answered Feb 14 '18 at 23:18

Влад Бантуш

49
3

This is for me the cleanest implementation, but I altered it to `min-height: calc(100vh - [header-height]px - [footer-height]px);` works great. – NLxDoDge Jun 29 '20 at 20:22

score 3 · Answer 4 · answered Nov 17 '18 at 17:58

Use this stylesheet:

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

score 0 · Answer 5 · answered Dec 12 '21 at 11:53

<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
  <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>

<ul class="nav col-md-4 justify-content-end">
  <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
  <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
  <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
  <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
  <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
</ul>

Welcome to Stack Overflow. Code is a lot more helpful when it is accompanied by an explanation. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please [edit] your question and explain how it answers the specific question being asked. See [answer]. — ChrisGPT was on strike, Dec 12 '21 at 12:46

score 0 · Answer 6 · answered Dec 12 '21 at 20:26

:root {
    --text: #daf7a6;
    --header: #581845;
    --main: #900c3f;
    --footer: #ff5733;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

header,
main,
footer {
    color: var(--text);
    height: 100px;
    padding: 1rem;
}

header {
    background-color: var(--header);
}

main {
    background-color: var(--main);
}

footer {
    background-color: var(--footer);
    position: sticky;
    top: 100vh;
}

<header>header</header>
<main>content</main>
<footer>footer</footer>

Bootstrap footer at the bottom of the page

6 Answers6

Linked

Related