Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Armaan Dhanji
Armaan Dhanji
4,664 Points

How can I create 2 full-width footers in bootstrap? Been stuck on this for hours..

For hours, i've been trying to accomplish something which seemingly wouldn't be difficult to do.

GOAL: http://imgur.com/rlvgsqI

  • 1 fullscreen background image
  • 1 full-width responsive footer sticked at the bottom of the page
  • 1 full-width responsive div directly under the footer (download resume)

Does anyone know how I could get this basic sort of layout in bootstrap. Been trying to hours with no success.

3 Answers

Craig Watson
Craig Watson
27,930 Points

I have thrown one together with bootstrap framwork.

http://codepen.io/Craig-Watson/pen/VvwoxQ?editors=110

Not pretty to look at but you can add all the styles you wish from here and just be sure to make the bottom offset of the footer you want on top the same as the height of the bottom footer :)

Craig

Colin Marshall
Colin Marshall
32,861 Points

Nice! I didn't realize vh, and vw were well supported. Now knowing this, I will for sure be using those in the future. Kudos for teaching me something new and useful! Previously I was using javascript to do achieve a div that matches the height of the browser window.

My example also uses Bootstrap, but I just did the sticky footers part and didn't use the Bootstrap nav classes. Do you think there is an issue with semantics when you set it up like that since those technically aren't navigation bars? It gets the desired result though and that is the most important thing.

Armaan Dhanji hope one or both of our answers helps you out!

Craig Watson
Craig Watson
27,930 Points

Colin you are totally right! Looking back ( not to far lol ) I would not have approached it this way. I have re coded the page to suit not only the framework but semantics a lot better.

I can't think why I chucked two navs on like that, maybe just spur of the moment knowing the framework had the classes to do it :S

In a way this is a good lesson for me, just because it can be done a certain way doesn't mean it should be or has to be, better to do it the right way.

On the vh / vw subject, I had checked them out on can I use and all browsers support un prefixed, however there are a few known bugs but they seemed to be well away of this kind of use case.

My code now very much resembles yours :)

Craig

Armaan Dhanji
Armaan Dhanji
4,664 Points

By the way Craig, was your use of !important with a z-index of 1000 in order to ensure the stacking order of the footer always remains at the top?

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Something like this?:

http://codepen.io/colin-marshall/pen/BoaXyV

Armaan Dhanji
Armaan Dhanji
4,664 Points
Armaan Dhanji
Armaan Dhanji
4,664 Points

Just wanted to thank you both for your excellent answers. I gave best answer to craig for providing a slightly more complete example, and for teaching me about vh and vw...although I wish it was possible to give best answer to both of you. Really appreciate the thoroughness of your guys discussion!