Flush footer to the bottom of the page in bootstrap 4

I'm using bootstrap 4

I have my template structure like this

<div id="app">

  <div id="content">

    <nav id="content-header">

    ...code here...

    </nav>

    <main id="content-main">

    ...code here...

    </main>

    <div id="footer">

    ...code here...

    </div>

  </div>

</div>

However the footer does not flush to the bottom as expected. (I'm not looking for a sticky footer). How to send the footer down with the code im using.

Few weeks ago i read an articles that we need to use id="content" and content-header content-footer accordingly for bootstrap in order to make this work. I've lost the article link, hence posting a question here.

Any help is appreciated

asked Jun 4 '18 at 6:52

Srikanth Gopi

5481923

If I understand correctly, you want to have the footer ALWAYS at the bottom of the page/viewport. If so, I can help. Could you explain where the footer should be placed in these two scenarios 1. when there are more content than the viewport height. 2- when there is not enough content?

– mahan
Jun 4 '18 at 9:54

For example, my login page does not have much content so the footer does not stay at the bottom. I want it to stay at the bottom on these pages when there is less content on the page. Scenario 2 would suit better

– Srikanth Gopi
Jun 4 '18 at 10:10

add a comment |

I'm using bootstrap 4

I have my template structure like this

<div id="app">

  <div id="content">

    <nav id="content-header">

    ...code here...

    </nav>

    <main id="content-main">

    ...code here...

    </main>

    <div id="footer">

    ...code here...

    </div>

  </div>

</div>

However the footer does not flush to the bottom as expected. (I'm not looking for a sticky footer). How to send the footer down with the code im using.

Any help is appreciated

asked Jun 4 '18 at 6:52

Srikanth Gopi

5481923

If I understand correctly, you want to have the footer ALWAYS at the bottom of the page/viewport. If so, I can help. Could you explain where the footer should be placed in these two scenarios 1. when there are more content than the viewport height. 2- when there is not enough content?

– mahan
Jun 4 '18 at 9:54

For example, my login page does not have much content so the footer does not stay at the bottom. I want it to stay at the bottom on these pages when there is less content on the page. Scenario 2 would suit better

– Srikanth Gopi
Jun 4 '18 at 10:10

add a comment |

I'm using bootstrap 4

I have my template structure like this

<div id="app">

  <div id="content">

    <nav id="content-header">

    ...code here...

    </nav>

    <main id="content-main">

    ...code here...

    </main>

    <div id="footer">

    ...code here...

    </div>

  </div>

</div>

However the footer does not flush to the bottom as expected. (I'm not looking for a sticky footer). How to send the footer down with the code im using.

Any help is appreciated

asked Jun 4 '18 at 6:52

Srikanth Gopi

5481923

I'm using bootstrap 4

I have my template structure like this

<div id="app">

  <div id="content">

    <nav id="content-header">

    ...code here...

    </nav>

    <main id="content-main">

    ...code here...

    </main>

    <div id="footer">

    ...code here...

    </div>

  </div>

</div>

However the footer does not flush to the bottom as expected. (I'm not looking for a sticky footer). How to send the footer down with the code im using.

Any help is appreciated

bootstrap-4

asked Jun 4 '18 at 6:52

Srikanth Gopi

5481923

asked Jun 4 '18 at 6:52

Srikanth Gopi

5481923

asked Jun 4 '18 at 6:52

Srikanth Gopi

5481923

asked Jun 4 '18 at 6:52

Srikanth Gopi

5481923

asked Jun 4 '18 at 6:52

Srikanth Gopi

5481923

If I understand correctly, you want to have the footer ALWAYS at the bottom of the page/viewport. If so, I can help. Could you explain where the footer should be placed in these two scenarios 1. when there are more content than the viewport height. 2- when there is not enough content?

– mahan
Jun 4 '18 at 9:54

For example, my login page does not have much content so the footer does not stay at the bottom. I want it to stay at the bottom on these pages when there is less content on the page. Scenario 2 would suit better

– Srikanth Gopi
Jun 4 '18 at 10:10

add a comment |

If I understand correctly, you want to have the footer ALWAYS at the bottom of the page/viewport. If so, I can help. Could you explain where the footer should be placed in these two scenarios 1. when there are more content than the viewport height. 2- when there is not enough content?

– mahan
Jun 4 '18 at 9:54

For example, my login page does not have much content so the footer does not stay at the bottom. I want it to stay at the bottom on these pages when there is less content on the page. Scenario 2 would suit better

– Srikanth Gopi
Jun 4 '18 at 10:10

If I understand correctly, you want to have the footer ALWAYS at the bottom of the page/viewport. If so, I can help. Could you explain where the footer should be placed in these two scenarios 1. when there are more content than the viewport height. 2- when there is not enough content?

– mahan
Jun 4 '18 at 9:54

For example, my login page does not have much content so the footer does not stay at the bottom. I want it to stay at the bottom on these pages when there is less content on the page. Scenario 2 would suit better

– Srikanth Gopi
Jun 4 '18 at 10:10

add a comment |

1 Answer
1

active

oldest

votes

There are a couple of ways that you can achieve it. I want to show you two of them.

Flex

Use the h-100 class for all the parents of the #content div including html and body.

Use d-flex, flex-column, and h-100 classes for the #content div.

Use flex-grow-1 for the main content.

You should use boostrap version 4.1 or higher because the lower version does not havr flex-grow-1

See this pen. I recommend you to add and remove texts so that you see that it works.

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

min-height: calc(100vh - (header + footer height));

We have used this one, because some old browsers does not support flex box.

Find the sum of height of footer and header, suppose it is 120px

Set min-height of main to calc(100vh - 120px);

main {

  min-height: calc(100vh - 120px);

}

See this pen.
https://codepen.io/anon/pen/bKExLm

Visit these pages to learn the other methods

https://css-tricks.com/couple-takes-sticky-footer/

https://codepen.io/cbracco/pen/zekgx

edited Dec 12 '18 at 6:45

answered Jun 4 '18 at 10:40

mahan

2,1871319

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50674837%2fflush-footer-to-the-bottom-of-the-page-in-bootstrap-4%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

There are a couple of ways that you can achieve it. I want to show you two of them.

Flex

Use the h-100 class for all the parents of the #content div including html and body.

Use d-flex, flex-column, and h-100 classes for the #content div.

Use flex-grow-1 for the main content.

You should use boostrap version 4.1 or higher because the lower version does not havr flex-grow-1

See this pen. I recommend you to add and remove texts so that you see that it works.

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

min-height: calc(100vh - (header + footer height));

We have used this one, because some old browsers does not support flex box.

Find the sum of height of footer and header, suppose it is 120px

Set min-height of main to calc(100vh - 120px);

main {

  min-height: calc(100vh - 120px);

}

See this pen.
https://codepen.io/anon/pen/bKExLm

Visit these pages to learn the other methods

https://css-tricks.com/couple-takes-sticky-footer/

https://codepen.io/cbracco/pen/zekgx

edited Dec 12 '18 at 6:45

answered Jun 4 '18 at 10:40

mahan

2,1871319

add a comment |

There are a couple of ways that you can achieve it. I want to show you two of them.

Flex

Use the h-100 class for all the parents of the #content div including html and body.

Use d-flex, flex-column, and h-100 classes for the #content div.

Use flex-grow-1 for the main content.

You should use boostrap version 4.1 or higher because the lower version does not havr flex-grow-1

See this pen. I recommend you to add and remove texts so that you see that it works.

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

min-height: calc(100vh - (header + footer height));

We have used this one, because some old browsers does not support flex box.

Find the sum of height of footer and header, suppose it is 120px

Set min-height of main to calc(100vh - 120px);

main {

  min-height: calc(100vh - 120px);

}

See this pen.
https://codepen.io/anon/pen/bKExLm

Visit these pages to learn the other methods

https://css-tricks.com/couple-takes-sticky-footer/

https://codepen.io/cbracco/pen/zekgx

edited Dec 12 '18 at 6:45

answered Jun 4 '18 at 10:40

mahan

2,1871319

add a comment |

There are a couple of ways that you can achieve it. I want to show you two of them.

Flex

Use the h-100 class for all the parents of the #content div including html and body.

Use d-flex, flex-column, and h-100 classes for the #content div.

Use flex-grow-1 for the main content.

You should use boostrap version 4.1 or higher because the lower version does not havr flex-grow-1

See this pen. I recommend you to add and remove texts so that you see that it works.

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

min-height: calc(100vh - (header + footer height));

We have used this one, because some old browsers does not support flex box.

Find the sum of height of footer and header, suppose it is 120px

Set min-height of main to calc(100vh - 120px);

main {

  min-height: calc(100vh - 120px);

}

See this pen.
https://codepen.io/anon/pen/bKExLm

Visit these pages to learn the other methods

https://css-tricks.com/couple-takes-sticky-footer/

https://codepen.io/cbracco/pen/zekgx

edited Dec 12 '18 at 6:45

answered Jun 4 '18 at 10:40

mahan

2,1871319

There are a couple of ways that you can achieve it. I want to show you two of them.

Flex

Use the h-100 class for all the parents of the #content div including html and body.

Use d-flex, flex-column, and h-100 classes for the #content div.

Use flex-grow-1 for the main content.

You should use boostrap version 4.1 or higher because the lower version does not havr flex-grow-1

See this pen. I recommend you to add and remove texts so that you see that it works.

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

min-height: calc(100vh - (header + footer height));

We have used this one, because some old browsers does not support flex box.

Find the sum of height of footer and header, suppose it is 120px

Set min-height of main to calc(100vh - 120px);

main {

  min-height: calc(100vh - 120px);

}

See this pen.
https://codepen.io/anon/pen/bKExLm

Visit these pages to learn the other methods

https://css-tricks.com/couple-takes-sticky-footer/

https://codepen.io/cbracco/pen/zekgx

main {

  min-height: calc(100vh - 120px);

}

main {

  min-height: calc(100vh - 120px);

}

edited Dec 12 '18 at 6:45

answered Jun 4 '18 at 10:40

mahan

2,1871319

edited Dec 12 '18 at 6:45

answered Jun 4 '18 at 10:40

mahan

2,1871319

answered Jun 4 '18 at 10:40

mahan

2,1871319

answered Jun 4 '18 at 10:40

mahan

2,1871319

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu