Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
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

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

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 77
  • Thank you received: 3
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 4 years 1 month ago #4092

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 639
  • Thank you received: 170
Try:
.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
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 4 years 1 month ago #4093

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 77
  • Thank you received: 3

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 3 years 10 months ago #4189

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 77
  • Thank you received: 3
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 3 years 10 months ago #4191

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 639
  • Thank you received: 170
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
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/

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

  • Page:
  • 1
Moderators: jjs
Time to create page: 0.124 seconds
Copyright © 2020 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search