Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum
Main Forum
Developers
Position footer at foot of the page in Bootstrap
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.
  • Page:
  • 1

TOPIC:

Position footer at foot of the page in Bootstrap 8 years 1 month ago #4089

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
Is there any way of positioning the footer at the actual foot of the page in Bootstrap template?

Where there is only a small amount of text on a page the footer is positioned immediately under the section, and not at the actual foot of the page.

Here is a basic illustration of the problem: xerte.cardiff.ac.uk/play_4414

I've tried a few different things, but everything seems to fail due to the <body> element not automatically filling the available screen.

Please Log in or Create an account to join the conversation.

Position footer at foot of the page in Bootstrap 8 years 1 month ago #4092

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 850
  • Thank you received: 261
Try:
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/

Please Log in or Create an account to join the conversation.

Position footer at foot of the page in Bootstrap 8 years 1 month ago #4093

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4

Ron Mitchell wrote: Try:

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}


I've tried this solution previously, but I don't really want the footer fixed to the bottom of the user's veiwport, especially when there is content that stretches beyond this viewport. It just ends up looking messy, and content can be missed.

Ideally, the footer should always appear after the page content (particularly if the is content is taller than the user's viewport) but it should be pushed to the bottom of the screen when there is not enough content to fill the screen.

Please Log in or Create an account to join the conversation.

Position footer at foot of the page in Bootstrap 7 years 10 months ago #4189

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
  • Posts: 92
  • Thank you received: 4
So, I think I finally found a solution to this. Will need to test it to make sure it doesn't break anything in the layout, but it seems promising so far:
body {
	display:flex;
	flex-direction:column;
	min-height:100vh;
}
.container {
	flex: 1;
}

Please Log in or Create an account to join the conversation.

Position footer at foot of the page in Bootstrap 7 years 10 months ago #4191

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 850
  • Thank you received: 261
Thanks Neil.
Just tested this and can't spot any adverse effects.
I think in most case people won't notice the problem as their pages will often have enough content for it not to matter but if there aren't any adverse affects then it will be worth us making this part of the core code.
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/

Please Log in or Create an account to join the conversation.
  • Page:
  • 1
Moderators: JohnSmith
Forum
Main Forum
Developers
Position footer at foot of the page in Bootstrap
Time to create page: 0.052 seconds
Main Pages
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search