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 Bootstrap Basics Using Bootstrap Components Inline Navs and Dropdown Buttons

Posted by Nas Jones
Nas Jones
7,849 Points

Footer not aligned

https://w.trhou.se/zm8oghctee This is my workspace the footer is not aligned like in the video what's wrong?

Remon Jansen of Lorkeers
Remon Jansen of Lorkeers
24,012 Points

Hey Nas,

Not sure if you've managed to fix it yet or not, but try adding the current bootstrap version to the head, it might change some other things as well, like for example the jumbotron feature doesn't exist in 5.0, but it should fix the footer positioning.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

you can also find it here: https://getbootstrap.com/docs/5.0/getting-started/download/

hope this helps!

Nas Jones
Nas Jones
7,849 Points

Hello thank you for helping. I copy and pasted your code and replaced what was there in the head and it still doesn't help. I then went to bootstrap and got the updated script tags and replaced them at the bottom of the body tag if im not mistaken. It still doesn't work, all the content of the footer goes and stays on the left. https://w.trhou.se/alxdryua10 This is my workspace if you would like to see my code.

2 Answers

Remon Jansen of Lorkeers
Remon Jansen of Lorkeers
24,012 Points

Hi Nas,

I had the same problem with the drop down list in mine as well, I fixed it by changing data-bs-toggle in line 150 to data-toggle, and did the same with some of the other elements as well, not sure what exactly the -bs- stands for, but I had a number of elements that weren't displaying properly until I removed the -bs- from the middle in these classes.

Hope it helps!

Nas Jones
Nas Jones
7,849 Points

That fixed it thank you for the help!

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,671 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,671 Points

Hey Nas,

Check line 137 in your workspace. You have an empty div class="col-md-7"></div>.

Per the video, the unordered list should be contained in this. Just move the closing </div> below the closing </ul>. That should get you on your way.

Hope this helps.

Nas Jones
Nas Jones
7,849 Points

Hello thank you for helping that fixed it. However a new issue came up the drop down button wont drop down i dont know why. I saw another user had the same issue and replaced his script tags i already did that if im not mistaken so this issue shouldn't be happening but it still is. https://w.trhou.se/8tbdn88kz2 Here's my workspace.