Bootstrap drop down menu not clickable.

158 views
Skip to first unread message

sunday honesty

unread,
May 15, 2020, 7:18:35 PM5/15/20
to Django users
This is my first question here. I hope I find answer. Am happy to be with you guys.

I am beginner and have been stucked with this issue for about two weeks now.

Because I don't have good network access here, I decided to download and include Bootstrap source file in the static folder of my Django project.
I basically included four files to be able to use bootstrap. The files and their location are as follow.
my_project_directory
my_priject
static
css
bootstrap.min.css
js
bootstrap.min.js
jQuery.min.js
popper.min.js

I have done all the settings as suggested from one online resource. Settings like setting static_url, static_root and staticfile_dir.

I have included {% load static %} at the top of my base.html file and referred to the four files in included. I linked css at the head and the three Js at the body before closing body.

When I try adding nav bar and drop-down menu, every other things worked except for the dropdown. If I click on the item that should reveal the dropdown items, it's simply not showing anything but
append # to my home url at the tab.
That is, before, my home page is something like localhost but when I click on the dropdown, it changes to localhost/# with nothing dropping down.

I have posted this issue on Stackoverflow but no answer till now.

Here's a link to the codes, may be you can take a look at it.

https://stackoverflow.com/questions/61709772/my-bootstrap-drop-down-items-are-not-clickable-showing

Thanks in advance for helping me out.

Simon A

unread,
May 16, 2020, 1:48:28 PM5/16/20
to Django users
Try to include the dependencies inside the block content. Here is what I did

{% block content %}
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}

sunday honesty

unread,
May 16, 2020, 2:03:35 PM5/16/20
to Django users
I did that and got a TemplateSyntaxError stating that bootstrap4 is not a registered tag library

Simon A

unread,
May 16, 2020, 2:07:33 PM5/16/20
to django...@googlegroups.com
Is it in you installed apps?

On Sat, May 16, 2020, 22:04 sunday honesty <honest...@gmail.com> wrote:
I did that and got a TemplateSyntaxError stating that bootstrap4 is not a registered tag library

--
You received this message because you are subscribed to a topic in the Google Groups "Django users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-users/4gDB5RmIxfA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to django-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/5756089d-a944-4b3c-8d35-74e328c47cc1%40googlegroups.com.

Clive Bruton

unread,
May 16, 2020, 2:31:45 PM5/16/20
to django...@googlegroups.com

On 16 May 2020, at 15:03, sunday honesty wrote:

> I did that and got a TemplateSyntaxError stating that bootstrap4 is
> not a registered tag library

Did you put it in your installed_apps?


-- Clive

sunday honesty

unread,
May 16, 2020, 2:45:15 PM5/16/20
to django...@googlegroups.com
I included it to installed app and got an error message on the console. "Module not found, no module named bootstrap 4"

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/AF951EBC-2228-4CB5-92CA-F7207A31DE0B%40indx.co.uk.

Simon A

unread,
May 16, 2020, 2:49:24 PM5/16/20
to django...@googlegroups.com
Try to run the pip install command if you havent already. Check the correct command to install bootstrap3 or 4 if forgot the complete package name.

You received this message because you are subscribed to a topic in the Google Groups "Django users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/django-users/4gDB5RmIxfA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to django-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CALcuGNsKtsCKW8FiTSSnrD1B7ajLYGU-rUGs23SFPSfsva%2BwMw%40mail.gmail.com.

sunday honesty

unread,
May 16, 2020, 2:53:02 PM5/16/20
to django...@googlegroups.com

sunday honesty

unread,
May 16, 2020, 3:10:25 PM5/16/20
to django...@googlegroups.com
I saw "pip install django-bootstrap4"

After installing, I should load bootstrap
Then I could add bootstrap form.

Other tutorials I have seen don't require downloading bootstrap since I have doneloaded the compiled bootstrap and added it to the static folder of my Django project.
If really I must download bootstrap using pip before it works, why did other bootstrap features worked well except for the dropdown?

Simon A

unread,
May 16, 2020, 3:27:09 PM5/16/20
to django...@googlegroups.com
Not quite sure on that. Usually what I do is the process that you just mentioned and what we did earlier for all the packages that I use.

Clive Bruton

unread,
May 17, 2020, 1:50:18 AM5/17/20
to django...@googlegroups.com

On 16 May 2020, at 15:43, sunday honesty wrote:

> I included it to installed app and got an error message on the
> console. "Module not found, no module named bootstrap 4"

"bootstrap4"


-- Clive

sunday honesty

unread,
May 17, 2020, 6:34:33 AM5/17/20
to django...@googlegroups.com
That's what I did... But the question is do I need to download django-bootstrap with pip before I can use compiled bootstrap I have downloaded?
Isn't django-bootstrap different from bootstrap?

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.

Kasper Laudrup

unread,
May 17, 2020, 8:50:20 AM5/17/20
to django...@googlegroups.com
Hi Sunday

On 17/05/2020 08.33, sunday honesty wrote:
> That's what I did... But the question is do I need to download
> django-bootstrap with pip before I can use compiled bootstrap I have
> downloaded?
> Isn't django-bootstrap different from bootstrap?
>

The compiled bootstrap you have downloaded is just a bunch of CSS
styles. You have to do some manual work to make that work with you
Django project.

The whole point of something like the django-bootstrap package is to
avoid that manual work.

Have you tried following the very simple installation instructions:

https://django-bootstrap4.readthedocs.io/en/latest/installation.html

Kind regards,

Kasper Laudrup

sunday honesty

unread,
May 17, 2020, 9:28:38 AM5/17/20
to django...@googlegroups.com
Thanks for replying...
I just downloaded it now following the guide on the doc you sent me.
I have added it to my installed app and requirements.txt.
I loaded it at the top of my template and it didn't work. I then included it in the {% block content %} as suggested by a member here yesterday, yet it didn't work.
I don't know what's just wrong.
You can take a look at my base.html file

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.

Kasper Laudrup

unread,
May 17, 2020, 9:47:55 AM5/17/20
to django...@googlegroups.com
Hi Sunday,

On 17/05/2020 11.27, sunday honesty wrote:
> Thanks for replying...
> I just downloaded it now following the guide on the doc you sent me.
> I have added it to my installed app and requirements.txt.
> I loaded it at the top of my template and it didn't work. I then
> included it in the {% block content %} as suggested by a member here
> yesterday, yet it didn't work.
> I don't know what's just wrong.
> You can take a look at my base.html file
> https://pastebin.com/4gVcN2si
>

I would definitely load it at the top of the template as seems to be
what is suggested in the quickstart guide:

https://django-bootstrap4.readthedocs.io/en/latest/quickstart.html

I'm not sure what you mean by "not working". Would be nice with some
more details. Consider using the developer tools of your browser and see
if there are any errors in the console log.:

Does the bootstrap CSS files load?
Any javascript errors?
etc.

Kind regards,

Kasper Laudrup

Miracle

unread,
May 17, 2020, 9:51:44 AM5/17/20
to django...@googlegroups.com

Miracle

unread,
May 17, 2020, 10:31:47 AM5/17/20
to django...@googlegroups.com
Have you tried the same drop down menu code in a plain html file?

Without django involved.

Just create a html file, put the menu code and boostrap code and test if it works in the first place.  This issue might be the dropdown configuration.
Reply all
Reply to author
Forward
0 new messages