Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set footer on bottom (adapted to content) with Angular 4 and Bootstrap 4

¿How can i make a footer stay on bottom of a website with the following structure?:

<html>
    <head>
    </head>

    <body>
        <app-root></app-root>
    </body>

</html>

So, the app-root is the main component in angular, inside this component i have the following structure:

<app-navbar></app-navbar>
<div class="container">
    <div class="row">

        <div class="col-12 p-0">
            <app-information *ngIf="title == 'information'"></app-information>
            <app-form *ngIf="title == 'form'"></app-form> 
            <app-proyects *ngIf="title == 'proyects'"></app-proyects>
            <app-blog *ngIf="title == 'blog'"></app-blog>
            <app-courses *ngIf="title == 'coursess'"></cursos>
        </div>

    </div>
</div>
<app-footer></app-footer>

So, just for understanding, the divs inside the col-12 div are shown depending on a variable called title setted up by pressing buttons on the navbar. The case is that not all of those divs have content that exceedes the screen size, and the footer goes upwards.

Inside my footer i have this structure:

<footer class="bg-inf-blue" >
    <div class="container p-0">
        <div class="row text-white py-3">
            <div class="col-6 h6 p-0">Contact</div>
            <div class="col-6 h6">Social Media</div>
            <div class="col-2 p-0">
                <ul class="list-unstyled">
                    <li class="h6">Place 1</li>
                    <li>Place 1 address</li>
                    <li>XXX XXX-XXXX</li>
                </ul>
            </div>
            <div class="col-2">
                <ul class="list-unstyled">
                    <li class="h6">Place 2</li>
                    <li>Place 2 address</li>
                    <li>XXX XXX-XXXX</li>
                </ul>
            </div>
            <div class="col-2">
                <ul class="list-unstyled">
                    <li class="h6">Place 3</li>
                    <li>Place 3 address</li>
                    <li>XXX XXX-XXXX</li>
                </ul>
            </div>
            <div class="col-6 align-items-center">
                <a href="https://www.facebook.com/address/" target="blank"><img src="../assets/facebook-logo-button.png" height="40px"></a>
                <a href="https://twitter.com/address" target="blank"><img src="../assets/twitter-logo-button.png" height="40px"></a>
            </div>
            <div class="col-12 p-0">
                <small>Lorem ipsum dolor sit amet consectetur</small>
            </div>
        </div>
    </div>
</footer>

what i need is that the footer to stay on the bottom of the screen when the content between the and is too short to fill the screen.

If there's a solution with CSS, i'm working with Twitter Bootstrap 4, if there's a solution with typescript, i'm working with Angular 4.

like image 897
Carlos Pisarello Avatar asked Nov 13 '17 21:11

Carlos Pisarello


People also ask

How do you set the footer at the bottom of the page in bootstrap?

In order for this element position at the bottom of the page, you have to add fixed-bottom to the class footer .

How do you place the footer at the bottom of the page in Angular?

In Angular we can create a footer by making use of 'mat-sidenav-container' it is a container inside which we can place all our compounds that needs to be there on the page for the user. The footer div for the tag will go at the end of this tag, with few configurations inside the CSS file itself.

How do I put the footer at the bottom of the page in HTML?

html. < div id = "footer" >This is a footer. This stays at the bottom of the page.


1 Answers

You can apply a sticky footer as described on the Twitter v4 example (https://v4-alpha.getbootstrap.com/examples/sticky-footer/).

Here is a short example:

HTML

<footer class="footer">
 ...
</footer>

CSS

html {
    position: relative;
    min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px;
}
like image 59
pixelbits Avatar answered Sep 17 '22 13:09

pixelbits