【Django】BootstrapでjQueryが読み込めない

（最終更新月：2021年12月）

「BootstrapでAlertをつけたけど、☓ボタンが動かない！」

「jQueryのCDNをつけてるのに正しく動かない！」

という方へ向けて、カンタンに解決できる方法を見つけたのでお伝えします！

当記事を通じて、

django-bootstrap4のインストール
jQueryが読み込めない！問題を解決する方法

についてお伝えします

CDNからjQueryを読み込めない場合は、django-bootstrap4を使うとカンタンに問題が解決します

【インストール方法】

pip install django-bootstrap4

【設定方法】

settings.pyで、

INSTALLED_APPS = [
    #....,
    'bootstrap4',
]

TEMPLATES = [
    {
        'OPTIONS': {
            'context_processors': [
            #....,
            ],
            'builtins':[  #この箇所を追記します
                'bootstrap4.templatetags.bootstrap4', #この箇所を追記します
            ], #この箇所を追記します
        },
    },
]

とします

【HTMLテンプレートで読み込み】

HTMLテンプレート内で、

{% bootstrap_javascript jquery=’full’ %}

としましょう

一例として、django-allauthのメッセージで適用する場合、

    {% block allauth %}
      {% bootstrap_javascript jquery='full' %}
    {% if messages %}
          <div>
              {% for message in messages %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                  {{message}}
                  <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
                </div>
              {% endfor %}
          </div>
      {% endif %}
    {% endblock %}

となります