DjangoでBootstrapを使う方法

DjangoにはBootstrapを扱うためのモジュールが用意されています。これを使うとBootstrapを楽に使うことができます。

Bootstrapの読み込みとHTMLタグへのクラス適用を普通にテンプレートファイル書いてもいいのですが、Djangoではフォームなど一部の要素を動的に出力しているため、そのやり方ではdjango-allauthを使用している場合などBootstrapを適用するのが面倒&管理しづらかったりします。

django-bootstrapモジュールを使えばそういった部分にもBootstrapを楽に適用することができます。

django-bootstrap4をインストール

使用している環境にdjango-bootstrapをインストールします。

pip install django-bootstrap4

settings.pyの変更

settings.pyのINSTALLED_APPSにdjango_bootstrap4を追加します。

INSTALLED_APPS = [
    ...
    'django_bootstrap4', # 追加
]

# # Bootstrap4のJavaScriptコンポーネントを使用するために必要なjQueryを自動的に読み込む
BOOTSTRAP4 = {
   'include_jquery': True,
}

Django Bootstrap4のテンプレートタグを使用できるよう記述します。

TEMPLATES = [
   {
       'BACKEND': 'django.template.backends.django.DjangoTemplates',
       'DIRS': [BASE_DIR / 'templates'],
       'APP_DIRS': True,
       'OPTIONS': {
           'context_processors': [
               'django.template.context_processors.debug',
               'django.template.context_processors.request',
               'django.contrib.auth.context_processors.auth',
               'django.contrib.messages.context_processors.messages',
           ],
           # Django Bootstrap4のテンプレートタグを使用できるようにする
           'builtins': [
               'bootstrap4.templatetags.bootstrap4',
           ],
       },
   },
]

Django Bootstrap4のテンプレートタグには次のようなものがあります。

bootstrap_form: Bootstrap4スタイルでフォームを表示します
bootstrap_form_horizontal: ホリゾンタルフォームをBootstrap4スタイルで表示します
bootstrap_formset: フォームセットをBootstrap4スタイルで表示します
bootstrap_messages: メッセージをBootstrap4スタイルで表示します
bootstrap_alert: アラートメッセージをBootstrap4スタイルで表示します

テンプレートで呼び出す

テンプレートのヘッダに下記のコードを追加します。

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    {% load bootstrap4 %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>

2行目はBootstrapのCSSを読み込む記述、3行目はBootstrap4のテンプレートタグを使用できるようにするための記述です。

自作のCSSを読み込む場合、CSSは後から読み込んだものが優先されるため、BootstrapのCSSよりも後で読み込みましょう。