0

I am creating a website with django and I have a dropdown menu like this:

<li class="dropdown">
  <a data-toggle="dropdown" href="#">{{ user.username }}</a>
  <ul class="dropdown-menu dropdown-menu-left">
    <li><a href="{% url 'users:profile' user.username %}">Profile</a></li>
    <li><a href="#">Requests</a></li>
    <li><a href="{% url 'booking:cars' %}">Your cars</a></li>
    <li><a href="#">Your reservations</a></li>
  </ul>
</li>

If I go to a page that contains this piece of code:

{% load bootstrap3 %} 
{% bootstrap_javascript jquery='full' %}

The dropdown menu is not working, but if I remove the 2 lines above the dropdown menu works fine.

Knowing that I have to keep this 2 lines, how I am doing to solve this problem

Improve this question
4
  • Have you another import js and css codes?Perhaps the other js and css codes dominate bootstrap codes.
    – kamilyrb
    Commented Feb 23, 2020 at 0:24
  • you need to import css and js file in sequence and don't forgot to import popper and jquery
    – l.b.vasoya
    Commented Feb 23, 2020 at 5:37
  • @kamilyrb I have in the main page page.html load static tag and link like this one: <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css"> but I don't have another tag load bootstrap3 or bootstrap_javascript
    – Yacine Rouizi
    Commented Feb 23, 2020 at 6:09
  • @lalit-vasoya can you explain more and gives more details please ?
    – Yacine Rouizi
    Commented Feb 23, 2020 at 6:27

1 Answer 1

Reset to default
0

you need to follow the sequence first bootstrap.css file second jquery.js then popper.js and then boostrap.js don't forgot to link popper.js this file are use for the open model

  • boostrap.css using link tag
  • jquery.js using script tag
  • popper.js using script tag
  • bootsrap.js using script tag
<head>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>

i give CDN link put in your code other wise download those file and link them,i gave you the above stuff follow those sequence & don't forgot proper.js or jquery.js

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  • if this work then make right answer if don't work please give the console error that show you in your browser,
Improve this answer
3
  • i give my answer check it
    – l.b.vasoya
    Commented Feb 24, 2020 at 4:27
  • I am using bootstrap 3 and when I downloaded bootstrap I don't have the file popper.js, I think this is in bootstrap 4. And I think the scripts should be loaded at the bottom of the page not on the head so the pages load faster
    – Yacine Rouizi
    Commented Feb 24, 2020 at 7:56
  • if you load your script at bottom please make sure you need to write open model script after this it is right you write this
    – l.b.vasoya
    Commented Feb 24, 2020 at 8:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.