Footer Design with Images in Bootstrap

Question

Footer Design with Images in Bootstrap

Hi, I recently started using Bootstrap and I'm trying to add a fixed footer to my page with a logo that is taller than the footer itself. I want the footer and the image to be fixed at the bottom of the page, while the image extends beyond the footer.

Something like this... https://i.sstatic.net/pWPS6.png

When I try to make the image part of the footer, it automatically resizes to fit the height of the footer. Can anyone help me with this? I've been struggling with this issue 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>

Appreciate any help on this. Thank you!

html css web bootstrap-4

Answer 1

Answer №1

It is recommended to maintain the current HTML structure, with the logo included in the footer for proper positioning and sizing relative to the footer.

The objective is to have the logo positioned at the bottom of the footer, potentially with some padding or margin, while also being taller, such as twice the height of the footer or slightly more (the exact difference is not specified in the query).

This simplified snippet assumes that the desired logo height is the footer height plus a bit extra. If a logo twice the height of the footer is desired, refer to the accompanying comment for guidance.

https://i.sstatic.net/qQaa4.png

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.sstatic.net/csy1S.png" class="logo">
  </div>
</footer>

Answer 2

It is recommended to maintain the current HTML structure, with the logo included in the footer for proper positioning and sizing relative to the footer.

The objective is to have the logo positioned at the bottom of the footer, potentially with some padding or margin, while also being taller, such as twice the height of the footer or slightly more (the exact difference is not specified in the query).

This simplified snippet assumes that the desired logo height is the footer height plus a bit extra. If a logo twice the height of the footer is desired, refer to the accompanying comment for guidance.

https://i.sstatic.net/qQaa4.png

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.sstatic.net/csy1S.png" class="logo">
  </div>
</footer>

Answer 3

Answer №2

To customize your img tag, include the following CSS styles:

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

Answer 4

To customize your img tag, include the following CSS styles:

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

Answer 5

Answer №3

To display a fixed image at the corner of the page above the footer, you can utilize fixed positioning to achieve this effect effortlessly.

Simply create a new div container and apply fixed positioning to that element. Refer to the implementation below for detailed instructions.

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

For more information, check out the documentation:

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

Here is a JsFiddle link for reference:

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

Answer 6

To display a fixed image at the corner of the page above the footer, you can utilize fixed positioning to achieve this effect effortlessly.

Simply create a new div container and apply fixed positioning to that element. Refer to the implementation below for detailed instructions.

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

For more information, check out the documentation:

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

Here is a JsFiddle link for reference:

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

Answer 7

Answer №4

To create the desired outcome, adjust the footer to have a relative position and set the image to absolute

position: absolute;
bottom: 0;
right: 20px; // Customize this value as needed

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>

Answer 8

To create the desired outcome, adjust the footer to have a relative position and set the image to absolute

position: absolute;
bottom: 0;
right: 20px; // Customize this value as needed

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>

Footer Design with Images in Bootstrap

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can you explain the purpose of the "for" attribute in the <output> tag of HTML?

Error Encountered: Angular JS Throwing Unhandled Injection Error

The functionality of the <button type="button"> is currently failing to submit the data as intended

Missing information from PHP contact form fields

How can we best understand the concept of custom directives using the link method?

Leverage htaccess functionality to modify website configurations without altering the URL

Clicking does not trigger scrollIntoView to work properly

navigation trail click feature

SASS mixin that enables flexbox capabilities without supporting older, legacy versions of flexbox

While using the Android Firefox browser, I noticed that the keyboard is causing my screen to shrink in size

Differences in Behavior of jQuery Element Styles in Firefox and Chrome When Modals Are Visible

How can one determine the most accurate box-shadow values?

Containerized chatboxes with improved stability

The stickiness of elements causes scrollbars to disappear in Chrome 77 on OSX

Creating Awesome Icons in Kendo Grid with Code In this tutorial, we will learn how to programm

HTML form for selecting shipping method in PayPal

show an HTML webpage within a <div> container using AJAX technology

What is the best way to adjust the position of a dropdown menu in Material UI?

The svg line is drawn with a width that is half of the specified width

Building an expansive navigation menu with react-bootstrap