CODEWITHSUNDEEP
cssangularangular-ui-bootstrapfooter
Alex
Alex

Reputation: 1947

Angular4 + Bootstrap 4 Footer at bootom of page

already searched google and this board and tried a lot of the solutions is found but without any success. I like to have a footer at the bottom of any site (and if the site is not high enough at the bottom of the viewport).

I'm using Angular4 and Bootstrap4 and this is my current code (this is one template, need to devide it because SO has problems with it):

<mat-toolbar color="primary" class="mat-elevation-z2" *ngIf="auth.isLoggedIn()">
<button mat-button class="pull-left" [disabled]="!auth.isLoggedIn()" (click)="sidenav.toggle()">
    <i class="fa fa-navicon" aria-hidden="true"></i> PowerPals
</button>

<div *ngIf="auth.isLoggedIn()">
    <button mat-button class="pull-left" (click)="showProfile()">
        <i class="fa fa-user" aria-hidden="true"></i><span class="d-none d-sm-inline"> {{auth.username$ | async}}</span>
    </button>

    <button id="logoutButton" mat-button class="pull-right" (click)="logout()">
        <i class="fa fa-power-off" aria-hidden="true"></i><span class="d-none d-sm-inline"> ABMELDEN</span>
    </button>
</div>


<mat-sidenav-container (window:resize)="onResize($event)" [style]="mainStyle.getValue()">
<mat-sidenav *ngIf="auth.isLoggedIn()" [mode]="sidenavMode" [opened]="true" #sidenav class="sidenav-shadow">
    <app-nav-pane *ngFor="let nav of (app.navmods$ | async)" [content]="nav"></app-nav-pane>
</mat-sidenav>
<div class="container-fluid">
    <div class="row" style="flex: 1 0 auto;">
        <div class="col-12">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>
<footer>
    <div class="footer-copyright">
        Footer
    </div>
</footer>

I want to footer to be, as said before, at the end of every page or the viewport. At the moment it's looking like this:

enter image description here

But the footer should be at the bottom of the page. Does anyone have a solution with this? I currently don't use any special css because no of the solutions i found worked.

Any help would be great :-)

Upvotes: 2

Views: 950

Answers (2)

Harry
Harry

Reputation: 253

In addition to above answer by Daniel C.

You can use the footer with out the card also.

For example: 

<footer class="fixed-bottom"><div>my footer</div></footer>

Upvotes: 0

Daniel C.
Daniel C.

Reputation: 5758

One possible solution is to use card-footer and fixed-bottom css classes (see: bootstrap v4 fixed-bottom), like this.

<footer class="card-footer fixed-bottom"><div>bla bla</div></footer>

Just make sure that footer is after </mat-sidenav-container>

Note: this solution will keep footer visible even if sidenav is hidden because it is added just after sidenav-container close tag.

Upvotes: 2

Related Questions