Sticky-footer

Use bsStickyFooterParent on the outer wrapper and bs-sticky-footer on the footer to keep the footer pinned to the bottom of the viewport when content is short, and to flow naturally when content is taller than the screen. It is pure CSS: the parent becomes a flex column at least --mp-sticky-footer-min-height tall (default 100dvh; lower it when a navbar already takes part of the viewport) and the footer takes the free space above itself.

Basic usage

Title 0

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat minus doloremque distinctio pariatur consequuntur velit a rem, consequatur inventore explicabo, iste, nemo sit adipisci. Magnam ab totam aspernatur eos iusto.

Title 1

Title 2

Title 3

Title 4

  
    
      
        <div bsStickyFooterParent>
        
    
      
          <main>
        
    
      
            Page content that may or may not fill the viewport.
        
    
      
          </main>
        
    
      
        
        
    
      
          <bs-sticky-footer>
        
    
      
            <bs-grid class="d-block py-3 bg-body-tertiary border-top">
        
    
      
              <div bsRow>
        
    
      
                <div [md]="4">A logo</div>
        
    
      
                <div [md]="4">Some links</div>
        
    
      
                <div [md]="4">&copy; Copyright</div>
        
    
      
              </div>
        
    
      
            </bs-grid>
        
    
      
          </bs-sticky-footer>
        
    
      
        </div>

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import {
        
    
      
          BsStickyFooterComponent,
        
    
      
          BsStickyFooterParentDirective,
        
    
      
        } from '@mintplayer/ng-bootstrap/sticky-footer';
        
    
      
        import {
        
    
      
          BsGridComponent,
        
    
      
          BsGridRowDirective,
        
    
      
          BsGridColumnDirective,
        
    
      
        } from '@mintplayer/ng-bootstrap/grid';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-sticky-footer-demo',
        
    
      
          templateUrl: './my-sticky-footer-demo.component.html',
        
    
      
          imports: [
        
    
      
            BsStickyFooterComponent,
        
    
      
            BsStickyFooterParentDirective,
        
    
      
            BsGridComponent,
        
    
      
            BsGridRowDirective,
        
    
      
            BsGridColumnDirective,
        
    
      
          ],
        
    
      
        })
        
    
      
        export class MyStickyFooterDemoComponent {}