Tips for keeping the footer at the bottom center of the page with Bootstrap?

I'm in the early stages of learning how to build a webpage using HTML & CSS, and I've been utilizing the Bootstrap 4.5 framework. One challenge I'm facing is trying to keep my footer with social media icons centered at the bottom of the page even when scrolling past the viewport.

I've attempted different approaches such as using flexbox with justify-content-center, applying text-align:center directly in the CSS, and adding specific IDs for targeting elements but haven't had success yet. Any suggestions or advice would be greatly appreciated. Below is the code snippet:

HTML:

<div class="footer">
    <span id="bottom"> 
        <hr>
        <p>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-facebook"></i></a>
       </p>
    </span>
</div>

CSS:

i {
    margin: 5px;
    color: #FFE10E;
}

.footer {
    position: absolute;
    bottom: 0;
    text-align: center;
}

#bottom {
    text-align: center;
}
htmlcssbootstrap-4

Answer №1

If you're looking for a straightforward solution, consider implementing flexbox on the BODY element or a wrapper element. Then, apply the `mt-auto` class to ensure the footer stays at the bottom of the page.

<body class="d-flex flex-column min-vh-100">
  <div class="container">Additional page content..</div>
  <div class="footer mt-auto text-center">
    <span id="bottom"> 
        <hr>
        <p>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-facebook"></i></a>
       </p>
    </span>
  </div>
</body>

For more information, check out: Bootstrap 4 Sticky Footer Not Sticking

Answer №2

In order to correct the code, you should set the footer's left to 0 and the width to 100%, this should resolve the issue. This solution worked for me personally. If it doesn't work for you, you might need to include additional CSS.

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #232323;
    text-align: center;
}

This is how the result will appear.

https://i.sstatic.net/onl7Q.png

I have also provided an alternative example to achieve a sticky footer using a different method.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
  margin-bottom: 50px;
}

.footer {
  flex-shrink: 0;
  background-color: aquamarine;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <h1>Sticky Footer with Flexbox</h1>
  <p><button id="add">Add Content</button></p>
</div>

<footer class="footer">
  Footer
</footer>

<script>
  $("#add").on("click", function() {
    $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".content");
  });
</script>

Answer №3

To ensure that the footer element stays in place, you can apply the CSS property position: fixed;. Make sure to also set width: 100%; so that the text appears centered on the page.

Check out this example on JSFiddle

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

Display a pop-up when hovering over a layer with react-leaflet

I am attempting to display a popup when hovering over a layer in react leaflet. Utilizing GeoJson to render all layers on the map and onEachFeature() to trigger the popup on hover, I encountered an issue where the popup only appeared upon click, not hover. ...

javascriptcssreactjsleafletreact-leaflet

Issue with login form in IONIC: Form only functions after page is refreshed

Encountering an issue with my Ionic login form where the submit button gets disabled due to invalid form even when it's not, or sometimes displays a console error stating form is invalid along with null inputs. This problem seems to have surfaced afte ...

htmlangularformstypescriptionic-framework

`Count the number of rows needed to accommodate text line breaks within a div element`

Is there a method to determine the number of lines that text breaks into using the CSS property word-break: break-all? For example, if I have a div like this: <div>Sample text to check how many lines the text is broken into</div> And the corr ...

javascriptjqueryhtmlcsshyphenator

Utilizing ReactJS useState to eliminate a className

Basically, I'm trying to remove a className from an element when a button is clicked. I've attempted to use useState hooks and a regular function, with the onClick event on the button triggering this function/setUseState. However, the className l ...

javascriptcssreactjsuse-state

Tips for setting uniform line-height across an entire project by adding a fixed value to the font size

I need to update line heights for a complete project. The requirement is that all line heights should equal the font size plus 4 pixels. Is there a simple way to do this using SCSS? Adjusting based on percentage would be easy, but the specific value is g ...

htmlcsssassfont-size

Is there a way to trigger an animation to play in reverse without using a selector and then have it play normally on the :active state?

Trying to achieve the same animation effect using different selectors has been a bit challenging for me. Specifically, when I attempt to utilize the animation without a selector and then with the selector :active, the browser only plays the animation once ...

htmlcsscss-animations

The hyperlink function is not operational in Gmail attachments

Using an anchor tag to navigate to a specific section within the same page works perfectly when the HTML file is on my local machine. However, when I attach the file in Gmail and open the attachment, it doesn't work. Why is this happening? How can I m ...

javascripthtmlcss

Having difficulty showing images from the static folder in Django

https://i.sstatic.net/rpHZg.pngThis page is my home.html Unfortunately, I am facing an issue with displaying the images located in the static/images/ directory. Even though *[09/Mar/2020 15:52:09] "GET /static/images/mona.jpg HTTP/1.1" 404 1669 ...

pythonhtmlcssdjangobootstrap-4

Do not activate hover on the children of parents using triggers

Check out my demonstration here: http://jsfiddle.net/x01heLm2/ I am trying to achieve two goals with this code. Goal number one is to have the mini thumbnail still appear when hovering over the .box element. However, I do not want the hover event to be tr ...

javascriptjquerycss

Need to know how to retrieve the li element in a ul that does not have an index of 2? I am aware of how to obtain the index greater than or less

I'm looking to hide all the li elements except for the one with a specific index. I've written some code to achieve this, but I'm wondering if there's a simpler way using jQuery. While jQuery provides methods like eq, gt, and lt, there ...

javascriptjquerycss

Guide to centering the navigation bar within a container using Bootstrap 4

I'm looking to center the navbar on my webpage. How can I style it so that it appears in the middle of the page? Currently, it's aligned with the left side of the page. section class="navbarSection"> <div class="contain ...

htmlcssbootstrap-4

Looking to incorporate HTML and JavaScript to create two unique forms that can be submitted separately on a single webpage

If I can't find an answer, then I ask: There are two different forms on the page: one is the "ask for call" form (which appears on every page of the site) and the other is a simple "contact form" (specifically placed on the contact page). Both forms ...

javascriptjqueryhtmlforms

Steps to align table next to the paragraph tag

I am facing an issue trying to align a table inline with the p tag in my HTML code. I have attempted to make minimal changes to achieve this, but it is not working as expected. Here is the code I have tried: <p>ABCD</p> <table style = displ ...

htmlcss

rearranging nodes from multiple arrays into a single array and then repositioning them within the parent array using angularjs

[![enter image description here][1]][1]I am working with AngularJS and I have multiple arrays named list1, list2, and list3. Each array is used in a different list. Within my application, there are two buttons and two divs - the left div displays elements ...

javascripthtmlcssangularjs

Tips for utilizing percentages along with MotionValues in Framer Motion?

With Framer Motion's useTransform, I'm looking to adjust the width of an element using a MotionValue that is a percentage (e.g. 75%) rather than in pixels. The default setting assumes pixels: <motion.div className="dynamic-element" style={{ ...

cssreactjsframer-motion

The requested resource at http://127.0.0.1:8000/storage/profiles/ could not be located (Error 404: Not

I have successfully implemented a feature on my website that allows users to upload their avatar picture using Vue.js and Laravel as the backend. The image is stored in the storage directory, and I can display it on the user's profile page using Vue.j ...

javascriptphphtmllaravelvue.js

Recurrence of the Chosen Headers

After discovering the new website http://csslint.net, I've started to question my approach to constructing stylesheets. One method I have recently used is as follows: /* Fonts */ h1 { font-size:20px } p { font-size:12px } /* Colors */ h1 { colo ...

cssperformancecss-selectorscsslint

The ng-model remains unchanged when the <select> element is modified using JavaScript

I am currently working on creating a customized dropdown box with the help of JavaScript and anglersJS to connect the data with the select element. The user interaction involves clicking on a div element that is styled to act as the dropdown option. This d ...

javascripthtmlangularjs

A HTML table featuring a stationary header, a scrollbar for horizontal navigation, and columns that adjust in

For the past week, I've been attempting to create an HTML table with a fixed header, dynamic column widths, and horizontal scroll. I've come across several options, but each seems to be lacking in some way. I would greatly appreciate any assista ...

javascripthtmlcsshtml-table

Insert the current row into the table

I'm working with an HTML table structure that looks like this: <table id="test"> <thead> <tr> <td></td> <td></td> <td></td> <td></td> ...

jqueryhtml