Why doesn't the dropdown menu in Django-summernote work?

So I have a Django application, am using django-summernote as editor. Everything works fine in the editor, except for the dropdown menu. No matter how many times I click the downward arrow, nothing changes. Let me show you the codes :
settings.py

SUMMERNOTE_CONFIG = {
    'iframe': True,
    'lang' : 'ko-KR',
    'summernote': {
        'width': '100%',
        'height': '450px',
        'placeholder':'위대한 글은 위대한 첫 문장에서 시작됩니다!',
        'toolbar': [
            ['style', ['style',]],
            ['font', ['fontsize', 'bold', 'italic', 'strikethrough']],  # 'fontname', 'clear', ...
            ['color', ['forecolor', ]], # 'backcolor'
            ['para', ['ul', 'ol', 'height']],
            ['insert', ['link']],
            ['misc', ['fullscreen', 'print', 'help', ]], # 'codeview', 'picture' ...
        ],
    },
    'js': (
        '/static/summernote-ext-print.js',
    ),
    'js_for_inplace': (
        '/static/summernote-ext-print.js',
    ),
    'css': (
        '//cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/theme/base16-dark.min.css',
    ),
    'css_for_inplace': (
        '//cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/theme/base16-dark.min.css',
    ),
    'codemirror': {
        'theme': 'base16-dark',
        'mode': 'htmlmixed',
        'lineNumbers': 'true',
    },
    'lazy': False,
}

BOOTSTRAP4 = {
    'include_jquery': True,
}

SUMMERNOTE_THEME = 'bs4'
X_FRAME_OPTIONS = 'SAMEORIGIN'

# I'm not really sure what brought me these settings below... Might be related to django-summernote?
STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    # 'djangobower.finders.BowerFinder'
]

BOWER_COMPONENTS_ROOT = '/PROJECT_ROOT/components/'
BOWER_INSTALLED_APPS = (
    'jquery',
    'jquery-ui',
    'bootstrap'
)

# All the STATIC and MEDIA settings are fine.

template

...
{% autoescape off %}
  <div class="row">
    <div class="col col-12 input-content">
      {{form.media}}
      {{form.contents|as_crispy_field|safe}}
    </div>
  </div>
{% endautoescape %}
...

What do you think is the problem? Everything but the dropdown menu works perfectly fine. Please let me know if you need further info. Thank you very much in advance :)

+++
For your information, these are what I have in my tag.

<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

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

Could one of these be the cause?

Solution

I know several causes that can lead to your problem:

Duplicated imports (jQuery, Bootstrap, etc.) in places like head tag and {{ form.media }}
You must call $("#content").summernote() and $('.dropdown-toggle').dropdown() to initialize