I am working on a site using bootstrap in which I want a footer stuck at the bottom all the time, but when the screen size is smaller(around 500px) the footer comes between the section

Here is the code for the same :

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<!-- Body -->
<section  id="ourservices">
  <h1>SERVICES</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus, dolor!</p>

  <div >
    <div >
      <div >
        <i  style="color: white;"></i>
      </div>
      <h2>E-Commerce</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo commodi officia provident odio soluta similique non eveniet perferendis nulla a laudantium, dignissimos dolore deleniti nam expedita vel molestiae unde beatae.
      </p>
    </div>
    <div >
      <div >
        <i  style="color: white;"></i>
      </div>
      <h2>Responsive Design</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo commodi officia provident odio soluta similique non eveniet perferendis nulla a laudantium, dignissimos dolore deleniti nam expedita vel molestiae unde beatae.
      </p>
    </div>
    <div >
      <div >
        <i  style="color: white;"></i>
      </div>
      <h2>Web Security</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo commodi officia provident odio soluta similique non eveniet perferendis nulla a laudantium, dignissimos dolore deleniti nam expedita vel molestiae unde beatae.
      </p>
    </div>
  </div>
</section>

<footer >
  <p >TECH PEEPS PVT LTD&copy; 2022</p>
</footer>

CodePudding user response：

Have you attempted defining footer properties as so?;

footer {
  position: fixed;
  bottom: 0;
  left: 0;
}

CodePudding user response：

You can try with following CSS

footer {
  position: fixed;
  bottom: 0;
  left: 0;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
}

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<!-- Body -->
<section  id="ourservices">
  <h1>SERVICES</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus, dolor!</p>

  <div >
    <div >
      <div >
        <i  style="color: white;"></i>
      </div>
      <h2>E-Commerce</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo commodi officia provident odio soluta similique non eveniet perferendis nulla a laudantium, dignissimos dolore deleniti nam expedita vel molestiae unde beatae.
      </p>
    </div>
    <div >
      <div >
        <i  style="color: white;"></i>
      </div>
      <h2>Responsive Design</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo commodi officia provident odio soluta similique non eveniet perferendis nulla a laudantium, dignissimos dolore deleniti nam expedita vel molestiae unde beatae.
      </p>
    </div>
    <div >
      <div >
        <i  style="color: white;"></i>
      </div>
      <h2>Web Security</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo commodi officia provident odio soluta similique non eveniet perferendis nulla a laudantium, dignissimos dolore deleniti nam expedita vel molestiae unde beatae.
      </p>
    </div>
  </div>
</section>

<footer >
  <p >TECH PEEPS PVT LTD&copy; 2022</p>
</footer>