Search code examples
cssbootstrap-4angular7

Angular 7 sticky footer with bootstrap4

I'm learning angular7 and I would create a sticky footer. I've tried a lot of solutions.

I tried :

No one works for me. I don't understand why, and I need help.

I have this code after removing all I've tried:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    FooterComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html (just the body)

<!doctype html>
<html lang="en">
<head>
  ...
</head>
<body class="d-flex flex-column h-100">
  <app-root></app-root>
</body>
</html>

app.component.html

<app-menu></app-menu>

<main class="container">
  <router-outlet></router-outlet>
</main>

<div class="footer mt-auto py-3">
  <app-footer></app-footer>
</div>

footer.component.html

<footer>
  &copy; 2019 - Zackna
</footer>

Edit: I update my codes with @avcajaraville answer that I have already tried but removed ^-^. And there is my result, as you can see my footer is not sticky to the bottom of the page.

Is a bootstrap native solution exists? My footer does not have a definitive height. What do I need to do to achieve my goal?

Solution

  • According to your code samples, you are not adding the classes you need.

    You can fix that by mimicking the same structure as in the example you provided:

    index.html

    <!doctype html>
<html lang="h-100">
<head>
  ...
</head>
<body class="d-flex flex-column h-100">
  <app-root></app-root>
</body>
</html>

    app.component.html

    <app-menu></app-menu>
<main class="container">
  <h1>title</h1>
  <router-outlet></router-outlet>
</main>
<div class="footer mt-auto py-3">
  <app-footer></app-footer>
</div>

    I think this would give you the expected behavior.

    In general, when working with a CSS framework, you need to use the classes specified in your html. Otherwise, no CSS can be applied.

    EDIT

    I added the needed class on the html tag in your index.html file & refactor app.component.html