# Integration von bootstrap5 [**django-bootstrap5**](https://django-bootstrap5.readthedocs.io/en/latest/) Installation per pip ```shell python3 -m pip install django-bootstrap5 ``` Aktvieren in komserv/settings.py ```python #... INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'xplanung_light', #... 'django_bootstrap5', #... ] #... ``` Anpassen des Basis-Templates xplanung_light/templates/xplanung_light/layout.html ```jinja {# Load the tag library #} {% load django_bootstrap5 %} {# Load CSS and JavaScript #} {% bootstrap_css %} {% bootstrap_javascript %} {# Display django.contrib.messages as Bootstrap alerts #} {% bootstrap_messages %} {% block title %}{% endblock %} {% load static %}
{% block content %} {% endblock %}
``` xplanung_light/templates/registration/register.html ```jinja {% extends "../xplanung_light/layout.html" %} {% load django_bootstrap5 %} {% bootstrap_css %} {% bootstrap_javascript %} {% block content %}

Registrieren

{% csrf_token %} {% bootstrap_form form %} {% bootstrap_button button_type="submit" content="Registrieren" %}
{% endblock %} ``` Frontend mit bootstrap5 [http://127.0.0.1:8000/](http://127.0.0.1:8000/) ```{image} img/bootstrap_startseite.png :alt: Frontend mit bootstrap5 :class: bg-primary :width: 800px :align: center ``` Registrierungsformular mit bootstrap5 [http://127.0.0.1:8000/register/](http://127.0.0.1:8000/register/) ```{image} img/bootstrap_registrierungsformular.png :alt: Registrierungsformular mit bootstrap5 :class: bg-primary :width: 800px :align: center ```