Make footer being pushed to bottom by upper content

user_15567111 0
Viewed 60

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


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

bootstrap-5 footer css html
3 Answers

Have you attempted defining footer properties as so?;

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

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


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

user_78994770

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


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

user_59528970
Related