Twitter Bootstrap Question posted in

Twitter bootstrap – Problems with footer bootstrap

I’m using Twitter Bootstrap, Is there are any classes for footer? Because I can’t make it to stay on bottom. Here is my jsfiddle https://jsfiddle.net/fNPvf/18578/. This is footer css:

.footer-no-nav {
    border-top: 1px solid #C2B8B8;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

Here is the picture when I use bootstrap class navbar-fixed-bottom
enter image description here

Here is when the window resized:
enter image description here

Fixed my problem, no need any navbar-fixed-bottom:

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;
  background-color: #f5f5f5;
}
Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    I've just fixed my problem, no need any navbar-fixed-bottom:

    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;
  background-color: #f5f5f5;
}

  2. 0

    Add navbar-fixed-bottom class to fixed it to the bottom like this:

    <footer class="footer-no-nav navbar-fixed-bottom" role="contentinfo">
    <!--content-->
</footer>

    N.B. You will have to give a background-color to the footer div and add a margin-bottom equivalent to the height of the footer to prevent elements from being covered by the footer.

    Login or Signup to reply.
  3. 0

    This work for my webpage

    <div class="panel-footer navbar-inverse navbar-fixed-bottom">
    Login or Signup to reply.
  4. 0

    try to add div for all your contain 

    .all    {
    min-height:750px;

    }

    and this is the link for your footer https://jsfiddle.net/fNPvf/18587/

    Login or Signup to reply.
  5. 0

    Sounds like you are after a Sticky Footer.

    Updated fiddle here: https://jsfiddle.net/fNPvf/18589/

    The css relies on a removing the total height of the footer from the margin-top to make the footer stick to the bottom unless there is enough content to push it further. For a 40px height + 1px border-top footer this would calculate our margin-top to equal -41px.

    footer {
    border-top: 1px solid #C2B8B8;
    height:40px;
    margin-top:-41px;
}

body,html{
    height:100%;
}
.container{
    min-height:100%;
}

<body>
  <div class="container">main content can go here</div>
  <footer>sticky footer content is stuck here</footer>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search