'Make footer being pushed to bottom by upper content

I am working on a site using bootstrap in which I want a footer being pushed 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 class="container ourservices text-center" id="ourservices">
  <h1>SERVICES</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus, dolor!</p>

  <div class="row mt-5">
    <div class="col-lg-4 col-md-4 col-sm-4 col-10 d-block mx-auto">
      <div class="imgsetting d-flex align-items-center justify-content-center mx-auto bg-warning">
        <i class="fa fa-shopping-cart fa-3x" 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 class="col-lg-4 col-md-4 col-sm-4 col-10 d-block mx-auto">
      <div class="imgsetting d-flex align-items-center justify-content-center mx-auto bg-warning">
        <i class="fa fa-display fa-3x" 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 class="col-lg-4 col-md-4 col-sm-4 col-10 d-block mx-auto">
      <div class="imgsetting d-flex align-items-center justify-content-center mx-auto bg-warning">
        <i class="fa fa-lock fa-3x" 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 class="text-warning">
  <p class="">TECH PEEPS PVT LTD&copy; 2022</p>
</footer>

Solution 1:^[1]

Have you attempted defining footer properties as so?;

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

Solution 2:^[2]

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 class="container ourservices text-center" id="ourservices">
  <h1>SERVICES</h1>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus, dolor!</p>

  <div class="row mt-5">
    <div class="col-lg-4 col-md-4 col-sm-4 col-10 d-block mx-auto">
      <div class="imgsetting d-flex align-items-center justify-content-center mx-auto bg-warning">
        <i class="fa fa-shopping-cart fa-3x" 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 class="col-lg-4 col-md-4 col-sm-4 col-10 d-block mx-auto">
      <div class="imgsetting d-flex align-items-center justify-content-center mx-auto bg-warning">
        <i class="fa fa-display fa-3x" 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 class="col-lg-4 col-md-4 col-sm-4 col-10 d-block mx-auto">
      <div class="imgsetting d-flex align-items-center justify-content-center mx-auto bg-warning">
        <i class="fa fa-lock fa-3x" 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 class="text-warning">
  <p class="">TECH PEEPS PVT LTD&copy; 2022</p>
</footer>

Solution 3:^[3]

You can give a minimum height of 100vh to the body and use flex utils to adjust the placements. By having your "main content" (i.e, ourservices section) grow(flex-grow-1) to occupy any additional space, you can "push" your footer to the bottom:

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

<body class="d-flex flex-column min-vh-100">
    <section class="container ourservices text-center flex-grow-1" id="ourservices">
        <h1>SERVICES</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus, dolor!</p>

        <div class="row mt-5">
            <div class="col-lg-4 col-md-4 col-sm-4 col-10 d-block mx-auto">
                <div class="imgsetting d-flex align-items-center justify-content-center mx-auto bg-warning">
                    <i class="fa fa-shopping-cart fa-3x" 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 class="col-lg-4 col-md-4 col-sm-4 col-10 d-block mx-auto">
                <div class="imgsetting d-flex align-items-center justify-content-center mx-auto bg-warning">
                    <i class="fa fa-display fa-3x" 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 class="col-lg-4 col-md-4 col-sm-4 col-10 d-block mx-auto">
                <div class="imgsetting d-flex align-items-center justify-content-center mx-auto bg-warning">
                    <i class="fa fa-lock fa-3x" 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 class="bg-warning text-white">
        <p class="">TECH PEEPS PVT LTD&copy; 2022</p>
    </footer>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sokari Andrew-jaja
Solution 2	Siva K V
Solution 3	anilkumarggk

'Make footer being pushed to bottom by upper content

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]