Author: Josh E

Django is just a giant CCS file with tons of pre-defined styles so that we don't have to create every style we want. To access a bootstrap class, make sure django-bootstrapX is installed and then use the class="style here" format.

Resources: How to add and use Bootstrap5 in django

Installation - django-bootstrap5 23.4 documentation

In your virtual env run

pip install django-bootstrap5

Add "django_bootstrap5" to the list of installed apps Then to load django into your project...

Include these lines of code in your base HTML template:

{% load django_bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
{% bootstrap_messages %}

You can now use bootstrap's styles in your project by assigning a class. For example creating a button with bootstrap styling:

<a href="https://apple.com" class="btn btn-info">Apple</a>

Bootstrap has a plethora of button styles

There is too much to put in this documentation, but see this link for full documentation to implement a navbar.

Use the .container class for a basic container. Other container types

<div class="container"> 
  <!-- content here --> 
</div>

Bootstrap defines many different colors for you to use: Bootstrap colors

Bootstrap provides a way to hide content visually for screen readers to access. Use the ".visually-hidden" class to use this.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Additional accessibility options

There are so many different styles with bootstrap and I can't include them all in this documentation. Check out Getting started with Bootstrap to find out more.