Ensure that the footer remains at the bottom of the page regardless of the content above

I am currently developing a website using bootstrap and I am facing an issue with the footer. I want the footer to always stay at the bottom of the page, but when the screen size is smaller (around 500px), the footer moves between sections. Here is the code snippet for the same:

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f6d60607b7c7b7b7f6e7f4f3a213f213d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfada0a0bb8cbbbaab9eaeadaf8eea7bfb3">[email protected]</a>/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>

htmlcssfooterbootstrap-5

Answer №1

Did you try setting the footer properties like this?

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

Answer №2

Here is a suggestion for CSS styling:

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


footer {
  position: fixed;
  bottom: 0;
  left: 0;
}
<!-- Incorporating Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4b4d5e4f7f0a110f110d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c3ceced5d2d5d3c0d1e1948f918f93">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<!-- Main Content -->
<section class="container ourservices text-center" id="ourservices">
  <h1>OUR 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>

Answer №3

To ensure the body has a minimum height of 100vh and adjust placements using flex utils, consider making your "main content" (in this case, the ourservices section) grow (flex-grow-1) to fill any extra space. By doing this, you can effectively position your footer at the bottom of the page:

<!-- Utilizing Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1838e8e959295938091a1d4cfd1cfd3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8f948a9488">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to prevent links from opening in an iframe and have them open in the main window instead?

Imagine you have an iframe on your webpage: <iframe style="border-radius:15px;" width="190" height="450" frameborder="0" scrolling="no" marginheight="5" marginwidth="10" src="../img/interactive_map/interactive_sverige.htm"> </iframe> ...

jqueryhtmlcssiframeinteractive

Jquery enables smooth image transitions when changing classes

I am seeking assistance with implementing a simple transition effect on hover/out for a div box to switch between the first image .image-main and the second one image-hover. The current setup works properly, but I am unsure how to incorporate a mouseOn/mou ...

htmljquerycssbootstrap-5transition

Tips on fixing image movement when scrolling and switching resolutions

I am currently working on developing my HTML/CSS portfolio. However, I am facing an issue where the images on the site move around whenever the scroll level or resolution size is changed. I want the images to remain in their respective blocks, displayed at ...

htmlcssimageresponsive-design

bespoke HTML elements and properties

I'm currently facing some difficulties and I am unsure of how challenging it can be. I have tried following various tutorials, including those on SO and YouTube, but they all provide different approaches leaving me stuck. My goal is to create a custo ...

javascripthtml

Adding elements to a form with ASP and storing them in a database

This is the content of richiesta.html: <HTML> <BODY> <table border> //creating a basic table <tr> <td> <form ACTION="richiesta.asp"> //redirecting to richiesta.asp <table> //opening a table structure <tr>&l ...

htmlasp.net

Press anywhere outside the container to conceal it along with the button

Utilizing an Angular directive to hide div elements when the user interacts outside of them has been effective. However, there is a specific issue that arises when clicking outside of a div on a button that toggles the visibility of the div. The 'ang ...

javascriptcssangularjshtml

Can you show me the way to open a single card?

Can someone assist me in making it so only one card opens when clicked, rather than all of them opening at once? Additionally, if there is already an open card and I click on another one, the currently open card should close automatically. If you have any ...

javascripthtmljquerycsstoggle

Automatically populate a jQuery dropdown box with MySQL data

I have a scenario where I need to create 2 dropdown boxes. The first dropdown box will display all the tables from a database, and when a table is selected, the second dropdown box should be populated with fields from that specific table. Dropdown Box 1: ...

jqueryhtmldrop-down-menu

Steps to include a HTML webpage within another page

I need assistance with a scenario involving two separate HTML pages on different servers. Merchant Form - Server A Payment Form - Server B Here's the desired scenario: The user completes all necessary fields on the Merchant Form and clicks submit. ...

javascripthtmljqueryajax

Achieving equal height for the inner div in Flexbox to match the height of its parent

I am currently using flexbox to structure a web application. While it is functioning as expected for most parts, I am encountering an issue with the main content area. The "router-view" element has the desired full height, but the nested div inside of it d ...

htmlcssflexbox

Issue with CSS Media Queries: Preventing an Element From Being Affected

As a complete beginner in HTML and CSS, I have a question that may seem silly. Recently, I created this HTML code: * { margin: 0px; padding: 0; box-sizing: border-box; } p { font-size: 14px; font-family: 'Work Sans', 'sans seri ...

htmlcss

Refresh a specific DIV element without having to refresh the entire page

I have a Div Tag that includes Small.php to populate it with information. My goal is to refresh the content every 15 seconds without reloading the entire webpage. I've attempted using JavaScript/jQuery without success. <script type="text/javascrip ...

javascriptphpjqueryhtmlajax

`To position an element within a div without affecting its layout, use absolute positioning``

Is it possible to add an element to a div that is aligned to the right but still sits on top of the other element within the div? Here are some images to illustrate the issue: https://i.sstatic.net/dW7ev.png The problem arises when you try to center the ...

htmlcssbootstrap-5

The button functionality gets hindered within the Bootstrap well

I'm trying to figure out what's wrong with my code. Here is the code: https://jsfiddle.net/8rhscamn/ <div class="well"> <div class="row text-center"> <div class="col-sm-1">& ...

javascripthtmlcsstwitter-bootstrap

What is the best way to utilize variable fonts with Google Fonts?

Traditional fonts typically require a separate file for each weight variant, such as 300, 400, and 500. However, with variable fonts, all weight combinations can be accessed through a single compact font file. This is extremely advantageous for web design. ...

cssfontsgoogle-fontsvariable-fonts

Is there a way to specifically style the element I am hovering over with Tailwind Typography and prose?

Currently, I am customizing my markdown pages with Tailwind typography and prose. I am facing an issue where the hover effect is being applied to all images at once instead of just the one being hovered over. Any ideas on how to fix this? Here is a snippe ...

cssfrontendtailwind-cssmarkdown

Using Python with Selenium, automate the process of clicking on each list item within

Hey there! I recently implemented the code below, and it worked perfectly. However, I'm now trying to figure out how to make it click on all the li items within a ul that have an empty class attribute. Any ideas on how to do this using Xpath? Xpath: ...

htmlpython-2.7python-3.xselenium-webdriveriteration

Why won't divs align vertically in the center?

I'm struggling to create a navigation bar layout where the icons are centered both horizontally and vertically within their cells. http://jsfiddle.net/digorydoo/j2v5m7gr/ I can't seem to pinpoint what's causing the issue with my current la ...

htmlcsscenteringnavigationbar

Change the color of the first element when hovering over any of its siblings using only CSS

I am looking for a solution using only CSS We have 3 circles here. When I hover over circles with the class name "Mycircle", the circle with the class name "BigCircle" should change to red color HTML <div class="BigCircle"></div> <div cl ...

htmlcss

Issue with input width percentage not functioning as expected

Is there a special method to specify the width of an input field in CSS without it extending beyond the container? I want my input field to be 98% of the container's width, but when I set it to that, it goes off the screen. This is the HTML code I am ...

csshtmlinputwidth