CODEWITHSUNDEEP
htmlcssbootstrap-4
user7649692
user7649692

Reputation:

How to make footer stick to the bottom

I am having a problem with my footer. I am trying to force it to the bottom, but it always looks ugly.

Here is the code: 

<div id="footer">
<div class="container">
    <div class="row">
        <h3 class="footertext">About Us:</h3>
        <br>
          <div class="col-md-4">
            <center>
              <img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
              <br>
              <h4 class="footertext">Programmer</h4>
              <p class="footertext">You can thank all the crazy programming here to this guy.<br>
            </center>
          </div>
          <div class="col-md-4">
            <center>
              <img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
              <br>
              <h4 class="footertext">Artist</h4>
              <p class="footertext">All the images here are hand drawn by this man.<br>
            </center>
          </div>
          <div class="col-md-4">
            <center>
              <img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
              <br>
              <h4 class="footertext">Designer</h4>
              <p class="footertext">This pretty site and the copy it holds are all thanks to this guy.<br>
            </center>
          </div>
        </div>
        <div class="row">

    </div>
</div>

I tried to use 

<div class="footer navbar-fixed-bottom">

but in that case my text ,which is located over the footer, get overlapped by footer

Here is css I used: 

    #footer {
padding-top: 100px
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Sets the fixed height of the footer here */
  height: 280px;
  background: 
  /* color overlay */ 
    linear-gradient(
      rgba(240, 212, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),
    /* image to overlay */
    url(222.png);
}
.footertext {
  color: #ffffff;
}

Here is what I mean by ugly. I did try to set html and body height as 100% in css

Upvotes: 0

Views: 121

Answers (4)

Hareesh
Hareesh

Reputation: 6900

Its <div class="footer navbar fixed-bottom">

not <div class="footer navbar-fixed-bottom">

you mistypes a -

Upvotes: 0

br.julien
br.julien

Reputation: 3460

I think you only have to change position: absolute; to position: relative; or position: fixed; for the div to stay at the bottom (depending on what behaviour you exactly expect).

Side note, don't use the tag <center> because it's now deprecated, use CSS instead (text-align: center).

Upvotes: 1

Rajan Patil
Rajan Patil

Reputation: 1002

You are missing a semi-colon after padding-top: 100px . You can also try position:fixed instead of position:absolute. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

Upvotes: 0

joao-m-santos
joao-m-santos

Reputation: 187

Please show us what you mean by "looks ugly" so we can help you, because we can't really understand your issue.

I'd say the problem could be in what the parent of #footer div.

Upvotes: 1

Related Questions