0

so I am working on a website that I want to be responsive to, but I can't figure out how to make the footer stick to the bottom of the page. I know, there is fixed property, but it hides half of my text when on a mobile phone. I found a solution, but I don't know how to use it (https://getbootstrap.com/docs/4.0/examples/sticky-footer/). I am using Bootstrap 5.0. I searched through the library and couldn't find a property footer or something like that. My goal is to have the footer as close as possible to the page I linked.

CSS & HTML

html {
  background-color: #eeeeee;
}

.bgr {
  background-color: #eeeeee;
}

.splitup {
  margin: 0px 0px 50px 0px;
  color: black;
  border-color: black;
  border-top: 5px solid;
}

.splitdown {
  margin: 50px 0px 0px 0px;
  color: black;
  border-color: black;
  border-top: 5px solid;
}

.top {
  padding: 20px 10px;
  margin: 0px 0px 0px 0px;
  text-align: center;
  background: #0063be;
  color: white;
  text-decoration: none;
}

.space {
  margin-bottom: 50px;
}

.bot {
  padding: 20px 10px;
  margin: 0px 0px 0px 0px;
  text-align: center;
  background: #0063be;
  color: white;
  text-decoration: none;
}

.link-light {
  text-decoration: none;
}

#logo {
  margin: 0px 0px 0px 0px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="bgr">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4 top">
        <a href=""><img src="" class="img-fluid" id="logo" height="30%" width="30%"></a>
      </div>
      <div class="col-sm-4 top">
        <h4>
          <a href="" class="link-light">Lorem ipsum</a><br>
          <a href="" class="link-light">Lorem ipsum</a>
        </h4>
      </div>
      <div class="col-sm-4 top">
        Lorem ipsum dolor sit amet
      </div>
      <div class="splitup"></div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-1"></div>
      <div class="col-sm-5 border border-dark">
        <p class="fw-bold">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Pellentesque sapien. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
        Aliquam erat volutpat. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Suspendisse nisl. Vestibulum fermentum tortor id mi. Donec quis nibh at felis congue commodo. Nunc tincidunt ante
        vitae massa. Etiam dictum tincidunt diam.<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
        <a href="" class="link-dark">Lorem ipsum dolor sit amet</a><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
      </div>
      <div class="col-sm-1 space"></div>
      <div class="col-sm-4 border border-dark">
        <p class="fw-bold">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Pellentesque sapien. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
        Aliquam erat volutpat. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Suspendisse nisl. Vestibulum fermentum tortor id mi. Donec quis nibh at felis congue commodo. Nunc tincidunt ante
        vitae massa. Etiam dictum tincidunt diam.<br>
      </div>
      <div class="col-sm-1"></div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row fixed-bottom">
    <div class="splitdown"></div>
    <div class="col-sm-2 bot">
      Lorem ipsum dolor sit amet
    </div>
    <div class="col-sm-8 bot">
    </div>
    <div class="col-sm-2 bot">
      <a href="" class="link-light">Lorem ipsum dolor sit amet</a>
    </div>
  </div>
</div>
</div>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
Bogy
  • 13
  • 1
  • bootstrap 5 of example you quoted https://getbootstrap.com/docs/5.0/examples/sticky-footer/ – Mark Schultheiss Jun 24 '21 at 11:29
  • I added bootstrap to your snippet so that it is displayed here. You do have an errant trailing `` there at then end left to match your original markup – Mark Schultheiss Jun 24 '21 at 11:30
  • This seems to be doing what you have coded, perhaps you do not intend to set the height of the elements in the footer so large (high)? in `.bot {` and `.splitdown {` with all that padding and margin setup. – Mark Schultheiss Jun 24 '21 at 11:43

2 Answers2

0

First thing, for footer, you need to use <footer class="footer"></footer> if you're using bootstrap.

You can also have a separate component for footer if you're using react.

In html, css

Bootstrap footer at the bottom of the page

https://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap#:~:text=The%20simplest%20technique%20is%20probably,the%20footer%20to%20the%20bottom.&text=Tested%20with%20Bootstrap%203.6.

The above links should be helpful

Aswath
  • 811
  • 7
  • 20
  • For clarity, the markup can be a `
    ` also as long as it has the `class="footer"` No where does the OP mention react. You quote another answer thus probably should have voted to close as duplicate.
     – Mark Schultheiss Jun 24 '21 at 11:39
0

For some projects I use

html {
  height: 100%; 
}
body {
  min-height: 100%;
}

test if it works for you

Kuro
  • 31
  • 1
  • 3