Twitter Bootstrap Question posted in

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

¿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.

Tags:

4

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    There are a lot of ways to set footer on bottom.
    This is one of them:

    <div class="wrapper container">

    ... // your html code here

    <div class="push"></div>

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

<style>

.wrapper{
    min-height: 100%;
    margin-bottom: -170px;
}

* html .wrapper{
    height: 100%;
}

.push{
    height: 170px;
}

</style>

    170px is a height of the footer in my case.

    Login or Signup to reply.
  3. 0

    If I’m understanding correctly, this can usually be achieved with css, traditionally:

    html,body{
    height: 100%
}

    For your example, you could try:

    .container { height: 100%;}

    Or even try moving your app-navbar and app-footer into index.html instead of app.component.html

    Login or Signup to reply.
  4. 0

    Same problem, solved with this method:

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

body {
    /* 115px is the height of my footer */
    padding-bottom: 115px;
}

.footer{  
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search