Add Bootstrap 5
Learn all about Add Bootstrap 5 in this comprehensive tutorial.
- •There are two main methods to use bootstrap in your Django project.
- •Bootstrap 5 should be installed in the virtual environment.
- •Next step is to include the bootstrap module in the INSTALLED_APPS list in settings.
- •ThThe My Tennis Club project already has a stylesheet, remove it and the Members page without styling will look like this:
- •To use Bootstrap 5 in the project, start by inserting some lines of code in the master.
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 virtual environment.
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 My Tennis Club project, 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:
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:
As you can see, we inserted these three lines in the <head> section:
The first line tells Django that it should load the Bootstrap 5 module in this template.
The second line inserts the <link> element with the referral to the bootstrap stylesheet.
The third line inserts the <script> element with the referral to the necessary javascript file.
We also did some changes to the HTML elements in the template, like inserting bootstrap classes to the navigation bar:
If you run the project now, the members page will look like this:
That's it! Bootstrap 5 is now a part of your project!
Learn more about Bootstrap 5 in our Bootstrap 5 Tutorial.
Module quiz
2 questionsWhich of the following is true about Add Bootstrap 5?
What is the most common pitfall when working with Add Bootstrap 5?
Answer all questions to submit.