Tips for keeping the footer firmly planted at the bottom of your Bootstrap 4 page

I have a question that might sound familiar! I want my footer to sit at the bottom of the page, but not remain fixed in place when I scroll. I'm aiming for a footer similar to what you see at the bottom of this webpage Footer Example. Here's the code snippet I've been working with so far using Bootstrap 4, but I haven't found a suitable class to achieve the desired effect.

<footer>
  <a href="#"><i class="fa fa-facebook"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-google-plus"></i></a>
  <a href="#"><i class="fa fa-twitch"></i></a>
</footer>

Although I'm familiar with the bootstrap class

.fixed-bottom, I specifically don't want the footer to remain fixed as I scroll.

htmlcssbootstrap-4

Answer №1

To achieve this result, you can simply utilize CSS in the following manner:

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color:#fff;
}

Answer №2

Utilizing Flexbox could greatly benefit your project, unless I have misunderstood your intentions. In any case, I am confident that Flexbox is the solution. Feel free to test it out here, or we can delve deeper into exploring other options.

Check out the CodePen example: https://codepen.io/codespent/pen/eKqzjX

body {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.main {
  flex: 1 0 auto;
  border: 1px solid #000;
}

.wrapper {
  display: flex;
  justify-content: center;
}

footer {
  flex: 0 0 auto;
  display: flex;
  color: #ccc;
  margin: 1em;
  padding: 1em;
  width: 80%;
  border-top: 1px solid blue;
  justify-content: center;
}

footer i {
  padding: 1em;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<body>
  <div class="main">
    <h1>Hello Flex</h1>
    <p>This is Flexbox</p>

    <h1>Hello Flex</h1>
    <p>This is Flexbox</p>
  </div>
</body>
<div class="wrapper">
  <footer>
    <a href="#"><i class="fa fa-facebook"></i></a>
    <a href="#"><i class="fa fa-twitter"></i></a>
    <a href="#"><i class="fa fa-google-plus"></i></a>
    <a href="#"><i class="fa fa-twitch"></i></a>
  </footer>
</div>

Key Points:

  • The document's body is set as a Flexbox container to allow flexibility with inner elements.
  • We are using flex-direction: column for vertical flow similar to traditional document layout.
  • The main container has a flex-grow value of 1 to occupy available space fully.
  • The footer has a flexible basis and acts as a container for horizontal alignment of links effortlessly.

Answer №3

For a solution, check out my response here: keeping footer at the bottom - example site This straightforward approach will effectively address your problem, regardless of whether or not you utilize bootstrap

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

What is the best way for a client to showcase a constantly fluctuating server-side variable's value?

On my website's homepage (index.html), I want to show a dynamic server-side global variable called serverVariable. This variable is always changing based on the node.js server-side code. However, since the client doesn't know what serverVariable ...

javascripthtmlnode.js

While in Safari, there seems to be a random issue where the embedded image in an SVG becomes blank when using the Canvas API to convert it to

My current approach involves generating a png from a valid svg string that contains an embedded image. The code snippet below illustrates this: <image xlink:href="data:image/png;base64,..." x="0" y="0" width="362" ...

javascripthtmlsvgcanvassafari

Adjust the size of a menu by modifying its width

Hey everyone, I recently joined this website and I'm still learning how to code. My current project involves creating an off-canvas menu, but I've come across a few challenges. Firstly, does anyone know how to adjust the width of the menu when it ...

htmlcssmenuoff-canvas-menu

Activate the saturation toggle when a key is pressed in JavaScript

I am trying to modify a script that currently toggles the value of a variable when a key is pressed and then lifted. Instead of changing the variable value, I would like to adjust the saturation of the screen based on key presses and releases. How can I ac ...

javascripthtmljquerycssfrontend

Issues with mobile stylesheet loading properly

After migrating my website to a new server, I encountered an issue where the text displayed incorrectly on mobile devices but appeared fine on laptops. Surprisingly, when using Chrome's mobile viewer for inspection, everything looked as it should with ...

cssmobile

Change the CSS element if the current URL is not example.com/page1 or example.com/page2

When I apply the following JS code snippets, my output is incorrect or does not display at all. Below are the codes in question: if (location.href != "website.com/page1" || "website.com/page2") { element.style.backgroundColor='none'; ...

javascripthtmlcsslocationlocation-href

Group input with segmented buttons (Bootstrap 4 alpha version)

In Bootstrap 4's input-group dropdown arrow is displayed under action button: https://i.sstatic.net/eGzcb.png <div class="container"> <div class="input-group"> <input type="text" class="form ...

twitter-bootstrapbootstrap-4twitter-bootstrap-4

Is there a way to make a button on a single div only affect that specific div

I have a PHP query that echoes a div for each row in the table. I want the div to slide up and then, when the user clicks the "read more" button, the div slides down. However, since it is echoed in a loop, all the divs have the same IDs and classes. I wo ...

javascriptjqueryhtmlcss

What are the steps to setting up my custom index.html as the main landing page for a Wordpress site?

Currently, I am in the process of creating a portfolio website for a client. Utilizing the Semplice template on Wordpress seemed like a good option, but unfortunately, it lacks some customization features that I require. As a result, I have taken matters i ...

htmlwordpresstemplatesindexing

Running a method at any given time within an ngFor loop in Angular 5

On my angular page, I am facing a challenge with updating a variable and displaying it in the HTML within an *ngFor loop. Here is an example of what I need: HTML: <table *ngFor="let data of Dataset"> somehowRunThis(data) <div>{{meth ...

htmlangulartypescript

Is it possible to change %20 in a URL to a hyphen?

Is there a way for my search form to display %20 in the URL when I fill the input field with spaces? For example: Basketball coach Current output: basketball%20coach Desired output: basketball-coach <form action="/tag/" id="form-hockey_v1" name=" ...

javascripthtmlurl

JavaScript causing issues with CSS transform translate functionality

const openBtn = document.querySelector('.open') const closeBtn = document.querySelector('.close') const navContainer = document.querySelector('.nav-container') openBtn.addEventListener('click', () => { openBt ...

javascripthtmlcss

Using HTML5 to create a structured outline with numbered headings at multiple levels

Currently, I am in the process of creating an HTML5 manual that will require numbering for various elements. The main headings should be numbered like "Section 4: Some Stuff" Subheadings will also need numbers such as "4.01: the first point you need to kn ...

htmlcssoutliner

Having trouble scaling image with CSS, not reacting to size properties

I have little experience in web development, but a small business client has me working on their website while I handle other tasks for them. I've created a home page design that is almost ready to be turned into a template for the chosen CMS. Things ...

htmlcssimage

The infamous IE7 Bug Caused by CSS HasLayout

Initially, I've reviewed the following articles in order to refresh my knowledge on these topics as I have encountered them before: Position Relative / Absolute / Fixed in IE While the above resources may be helpful for individuals facing these issu ...

cssdebugginginternet-explorer

What is the best way to deactivate a button using AngularJS?

$scope.date = moment(currentDate); $scope.date1 = moment(currentDate).add(-1, 'days'); function checkDate(){ if ($scope.date > $scope.date1) { return true; } else{ return false; } }; checkDate(); ...

javascripthtmlangularjs

How to achieve a sharp corner on the bottom border with Styled Components in CSS

I am trying to create a green triangular section as shown in the highlighted screenshot. I am looking for ways to achieve this effect, particularly adding the "corner" to the bottom border of the container. Here is my desired outcome: https://i.sstatic.ne ...

cssreactjsstyled-components

Potential issue: Firefox causes distortion in animated stroke-linecap="round" properties

While working on a project on Stack Overflow, I noticed a potential bug in Firefox when animating a line with stroke-linecap="round" and vector-effect="non-scaling-stroke" svg{border:1px solid} path{ animation: draw 1s ease-in; ...

cssanimationsvg

Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

I'm facing a challenge trying to blend a few elements together: My goal is to have two columns take up 100% of the browser width with a height that adjusts relative to this width. I want these columns to switch to one column when the viewport is sma ...

htmlcssresponsive-designmultiple-columnsviewport

The rendering of the input dropdown control in Angular JS is experiencing difficulties

I am currently using your Angular JS Input Dropdown control, and I have followed the code example provided on your demo page in order to implement the control on a specific page of my website built with PHP Laravel. However, I have encountered an issue dur ...

javascriptjqueryhtmlangularjslaravel