Add Bootstrap 5

There are two main methods to use bootstrap in your Django project. Either by downloading the required files and include them in your project, or you can install the bootstrap 5 module in your .

We will use the second method, installing Bootstrap 5 in the virtual environment.

Install Bootstrap 5

Bootstrap 5 should be installed in the virtual environment.

We will install it in an existing project, the , created earlier in this tutorial.

Open the command view, navigate to the virtual environment folder and activate the virtual environment:

Once you are inside the virtual environment, install Bootstrap 5 with this command:

Which will give you a result like this:

Update Settings

Next step is to include the bootstrap module in the INSTALLED_APPS list in settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'members',
    'bootstrap5',
]

Bootstrap 5 is now ready to use in your project!

Remove Old Styling

ThThe My Tennis Club project already has a stylesheet, remove it and the Members page without styling will look like this:

Add Bootstrap 5 to Template

To use Bootstrap 5 in the project, start by inserting some lines of code in the master.html template:

  
  {% load bootstrap5 %}
  {% bootstrap_css %}
  {% bootstrap_javascript %}

As you can see, we inserted these three lines in the section:

  {% load bootstrap5 %}
  {% bootstrap_css %}
  {% bootstrap_javascript %}

The first line tells Django that it should load the Bootstrap 5 module in this template.

The second line inserts the element with the referral to the bootstrap stylesheet.

The third line inserts the