HTML: add sticky footer responsive using bootstrap

Question

I'm trying to put sticky footer. I searched many examples and tried but failed. This link is the example what I tried. https://css-tricks.com/snippets/css/sticky-footer/

When I paste same code to my html, footer does not stick to bottom but just stay center of the main div or just pushing out main contents and stay inside of main div, I wonder if there is something wrong with my HTML.

This is CSS.

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

html {
    -webkit-font-smoothing: antialiased;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    line-height: 1.5;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 10px 20px;
}
.main{
    width: 70%;
 }

This is HTML.

<body>
  <header>
    </header>

   <div class="main">
    </div>

    <footer>
    </footer>
    </body>

Edited 1: I added picture.

The gray boxes are contents that supposed stay inside of main, and I want the footer stays the end of the main div. However, till now footers keep displayed middle of browser with contents.

you can add some other css style with html for your sticky footer: HTML -
Header

Main

Footer

CSS -- header { line-height:20px; background-color:red; } .wrapper, .main, footer { float: left; width:100%; height:calc(100% - 40px); margin-top:40px; position:absolute; } .main, footer{ height:calc(100% - 20%); background-color:yellow; } footer{ height:calc(100% - 80%); background-color:blue; } — Mohammed Javed, Sep 06 '18 at 10:51

score 2 · Answer 1 · answered Sep 06 '18 at 10:16

You can go ahead and use this example for sticky-footer in your web page, which is provided my bootstrap Example here

Bootstrap gives .fixed-bottom class to be used if you need a fixed footer, in your web page. Code is below : -

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

לבני מלכה · Accepted Answer · 2018-09-06T10:22:08.897

0

Set bottom: 0; and position: absolute; and remove unnecessary code as below

sticky bootstrap 4 doc(I open and see in F12)

footer {
       position: absolute;
       bottom: 0;
       width: 100%;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="main">
</div>

<footer>
footer
</footer>

edited Sep 06 '18 at 10:22

answered Sep 06 '18 at 10:16

לבני מלכה

15,925
2
23
47

I tried this, but still the footer displayed middle of browser and contents from main covers footer. I will add more pic to shows how does it looks like. – Sep 06 '18 at 10:34
try `position: fixed;` (do you remove unnecessary code?) – לבני מלכה Sep 06 '18 at 10:35
and do not `flex` the body(I think that the reason) – לבני מלכה Sep 06 '18 at 10:36
I dont want fixed footer, I want sticky footer looks like this. https://jsfiddle.net/8pkk08ku/ – Sep 06 '18 at 10:44
so use `position: sticky;` :https://stackoverflow.com/questions/19501919/difference-between-positionsticky-and-positionfixed – לבני מלכה Sep 06 '18 at 10:48

HTML: add sticky footer responsive using bootstrap

2 Answers2