Bootstrap collapse not working

HTML-CSS
1

Hi all.
I’m trying to copy a site : ubereats.com.
I’m trying to add Bootstrap collapse , but can’t get it to work at all?
Even though I’m literally copying/pasting the code from here:

bootstrap site

my code with copied/pasted bootstrap code not working.
[https://codepen.io/cynthiab72/pen/OJZYmEy?editors=1111]

I first tried my own code but that didn’t work obviously, so tried the bootstrap site code , thinking that should work, but no not either.
I’ve tried everything, I’ve included all the libraries needed I think, so I’m stumped!

I tried in different browsers, and still no luck.
My laptop is old though and runs windows 7.
Thanks :slight_smile:

2

can you clarify which element is the one that toggles the collapse?
(maybe you can post the specific snippet of code showing that element and the specific snippet of code showing the targeted element)

1 Like
3

Off course. And thank you for replying.
I removed the bootstrap site code, so just my own code:

<i class="fa-solid fa-bars" data-bs-toggle="collapse" data-bs-target="#hidden" ></i>
<div id='hidden' class='collapse flex flex-column'>
         <a class="btn btn-light smaller" href="#" role="button"> Log in</a>
         <a class="btn btn-dark smaller" href="#" role="button">Sign up</a>
        </div>
4

one thought i had is, instead of mixing font-awesome and bootstrap, what if you just used bootstrap to do this? (link goes to a specific part of the page that shows a collapsible hamburger menu)

1 Like
5

Thank you, but the same thing happened when I copied literally from bootstrap.com and pasted into my project .
I’ll take a look off course at your link , and maybe it works who knows.

6

do you happen to have a new codepen?

7

In the Codepen you first posted above, you have conflicting versions of the Bootstrap and JS libraries added as external links.

In the CSS Settings use:

https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css

In the JS Settings use:

https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js

As far as your code, what exactly are you expecting it to do compared to what is happening?

1 Like
8

Thank you, now it works. I had added any links I could find because that’s where the problem had to be . Thanks again!

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.