Image on footer in Bootstrap

Question

I'm new to Bootstrap. Trying to implement a fixed footer to the page with a logo whose height > height of the footer. The footer with an image are fixed at the bottom, while the image sticks out of the footer.

Like this...

If I make the image a part of the footer it resizes to the height of the footer. How do I implement this? I have been stuck on this for a while now.

/***Footer***/

footer {
  width: 100%;
  z-index: 9;
  background: #bff;
  position: fixed;
  bottom: 0px;
  left: 0px;
  height: 40px;
  padding: 0 25px;
  color: #808080;
}

.foot-lg {}

.foot-lg img {
  width: 50px;
}

.footer-logo-copyright,
.foot-menu,
.foot-social {
  overflow: hidden;
  display: flex;
  height: 40px;
}


/*** added on 04.Jun.21 to display GPTW logo sticking out of footer ***/

.foot-pop img {
  overflow: visible;
  max-height: 100%;
  height: 100%;
  width: auto;
}


/**********************************************************************/

.footer-logo-copyright *,
.foot-menu *,
.foot-social * {
  align-self: center;
}

.footer-logo-copyright p {
  padding: 0 10px;
  font-size: 11px;
}

.foot-menu li {
  float: left;
  list-style: none;
  border-right: 1px solid #808080;
}

.foot-menu li:last-child {
  border-right: none;
}

.foot-menu li a {
  display: block;
  padding: 0px 15px;
  text-decoration: none;
  color: #808080;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}

.foot-menu li:hover a {
  color: #f37e1f;
}

.foot-social li {
  float: left;
  margin-right: 10px;
}

.foot-social li:last-child {
  margin-right: 0;
}

.foot-social li a img {
  width: 13px;
  filter: invert(.7);
  opacity: 0.5;
}

.foot-social li:hover a img {
  /*    filter: invert(0);  */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
  <div class="row">

    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 no-pd">
      <div class="footer-logo-copyright">
        <a href="" class="pull-left foot-lg">
          <img src="img/logo-animation.gif" alt="footer-logo">
        </a>
        <p class="pull-left">is a registered trademark of XYZ Pty Ltd.</p>
        <p class="pull-left">&#169; 2021. all rights reserve to XYZ Pty Ltd.</p>

      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <ul class="pull-right foot-menu">
        <li>
          <a href="contact.html">Careers</a>
        </li>
        <li>
          <a href="#">Sitemap</a>
        </li>
      </ul>
    </div>

    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
      <ul class="foot-pop pull right">
        <li>
          <a href="# ">
            <img src="img/gptw21.jpg ">
          </a>
        </li>
      </ul>
      <ul class="foot-social pull-right ">
        <li>
          <a href="https://www.linkedin.com/company/sjs-enterprises-pvt.-ltd./?originalSubdomain=in " class=" ">
            <img src="img/linked-in-logo-key.svg ">
          </a>
        </li>
      </ul>
    </div>

  </div>
</footer>

Thanks

Your answer would be the property "position: fixed" to the image. For detailed understanding, please check this out https://stackoverflow.com/a/63816778/5161251 — Avinash, Jun 04 '21 at 04:51

score 1 · Accepted Answer · answered Jun 04 '21 at 05:41

Keep the HTML structure you have now, that is with the logo as part of the footer so it is positioned and is sized in relation to the footer.

What you want is for the logo to be able to be set at the bottom of the footer (perhaps with some padding or a margin) but to have, say, twice the height, or the height of the footer plus a bit (it's not possible to tell exactly which from the question).

This boiled-down snippet assumes you want the logo to be the height of the footer plus a bit. If you want it to be twice the height of the footer, say, see the comment.

body {
  width: 100vw;
  height: 100vh;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background-color: cyan;
}
footer .logo {
  position: absolute;
  right: 1vmin;
  bottom: 1vmin;
  height: calc(100% + 30px); /* CHANGE to be what you want - e.g. height: 200% for twice the footer height %/
  width: auto;
}

<footer>
  <img src="https://i.stack.imgur.com/csy1S.png" class="logo">
  </div>
</footer>

Thanks @Haworth, works like a charm. Great stuff. – Mandeep Singh Jun 04 '21 at 06:01 — Mandeep Singh, Jun 04 '21 at 06:01

score 0 · Answer 2 · answered Jun 04 '21 at 04:33

0

In your img tag add following style :

img {
    max-height: 100%; 
    height: 100%;
    width: auto; 
}

answered Jun 04 '21 at 04:33

ShivCK

557
10
16

score 0 · Answer 3 · answered Jun 04 '21 at 04:47

If you're wanting to have a fixed image appear in the corner of the page, over the footer, you can easily use fixed positioning to achieve the desired result.

All you would need to do is create a new div container and add the fixed positioning to that element. See the below implementation for more information.

<style>
.fixed-image {
      position: fixed;
      bottom: 0;
      right: 0;
    }
</style>

 <div class="fixed-image">
  <img src="https://dummyimage.com/120x170/000/fff" alt="Image">
</div>

Documentation:

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Attached is a JsFiddle:

https://jsfiddle.net/aus_tin/0dsoqecz/2/

score 0 · Answer 4 · answered Jun 04 '21 at 04:51

You can achieve this result if you make the footer relative positioned and image as absolute

position: absolute;
bottom: 0;
right: 20px; // Change it as per your requirement

html,
body {
  height: 100%;
  background-color: cadetblue;
  margin: 0;
  padding: 0;
}

div#wrapper {
  height: 100%;
  display: grid;
  grid-template-rows: 100px auto 50px;
}

header {
  background-color: purple;
}

footer {
  position: relative;
  background-color: lime;
}

footer>img {
  position: absolute;
  bottom: 0;
  right: 20px;
}

<div id="wrapper">
  <header>header</header>
  <main>body</main>
  <footer>
    footer
    <img src="https://picsum.photos/100" />
  </footer>
</div>

Image on footer in Bootstrap

4 Answers4