Flush footer to the bottom of the page in bootstrap 4

Question

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

Answer 1

Bootstrap has neither any id selector nor .content-header or .content-footer.

---

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

Flex - flex-grow-1

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

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

3. Use flex-grow-1 on the main content.

You should use boostrap version 4.1 or higher because the lower version does not have 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

Flex - mt-auto

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

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

3. Use mt-auto for the footer.

html,
body {
  height: 100%
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div id="app" class="h-100">
  <div id="content" class="d-flex flex-column h-100">
    <nav id="content-header" class="bg-info p-5">
    ...code here...
    </nav>
    <main id="content-main" class="bg-primary p-5">
    ...code here...
      
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat hic aspernatur quibusdam alias delectus odit officiis in, est sapiente deserunt harum aliquam at mollitia deleniti labore corrupti illum recusandae dolorum.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste inventore voluptatum sint mollitia unde quisquam numquam vitae? Id, quia. Cupiditate nam vero natus, facere nesciunt vel delectus assumenda eos sequi!
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non asperiores perferendis quae harum ab, dolorem dicta repudiandae quisquam repellendus eveniet, totam voluptatum, eum cum nobis? Atque alias dolores nam illum.
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi odit aspernatur minima tempora! Similique consequatur distinctio odit nemo, pariatur consectetur ad ipsum provident corporis nostrum culpa cumque doloremque quo quia.
    </main>
    <div id="footer" class="bg-danger p-5 mt-auto">
    ...code here...
    </div>
  </div>
</div>