First, create a folder named templates in your application folder. Inside this folder, create a base.html file and a navbar.html file. The templates will contain HTML files that Bootstrap will style.
While you can apply Bootstrap on the navbar.html template, using a base file is conventional. A base.html file will contain all the scripts and links to apply to any page. It reduces the complexity of individual templates, making your code cleaner and easier to understand.
First, load the bootstrap5 dependency. Then create two block styles where you will define all the styles for the templates. Include the {% bootstrap_css %} template tag and a link to the Bootstrap CSS file.
Next, create a block script that defines the JavaScript functionality.
Including the navbar.html in the base.html links it to Bootstrap.
Test the configuration by adding Bootstrap styles to the navbar.html template: