Bootstrap is a popular CSS framework that helps developers create responsive and visually appealing websites quickly. Instead of using third-party Django addons, you can add Bootstrap 5 manually to your Django project by either linking to a CDN or downloading the necessary files and placing them in the static folder.
1. Adding Bootstrap 5 via CDN
The simplest way to add Bootstrap 5 to your Django project is by including the Bootstrap CDN links in your base.html template.
Steps:
- Open your base.html template (usually located in templates folder).
- Add the Bootstrap CSS and JS links inside the <head> and before the closing <body> tag.
Here’s how your base.html should look:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}My Django Site{% endblock %}</title> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap Icons --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"> {% block extra_css %}{% endblock %} </head> <body> {% block content %}{% endblock %} <!-- Bootstrap 5 JS Bundle (Popper included) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> {% block extra_js %}{% endblock %} </body> </html>
With this setup, you can start using Bootstrap components and Bootstrap Icons in your Django templates without any additional configuration.
2. Adding Bootstrap 5 Manually by Downloading Files
If you prefer to host Bootstrap files locally instead of using a CDN, follow these steps:
Steps:
Download Bootstrap 5
- Visit Bootstrap's official website.
- Download the compiled CSS and JS files.
- Extract the downloaded folder.
Place Bootstrap Files in Django’s Static Folder
- Inside your Django project, create a static directory if it doesn’t exist.
- Inside static/, create a bootstrap/ folder.
- Move the extracted css and js folders from the Bootstrap download into static/bootstrap/.
Download and Add Bootstrap Icons
- Visit Bootstrap Icons.
- Download the icons package and extract it.
- Move the bootstrap-icons.css file and fonts/ folder into static/bootstrap/.
Modify base.html to Include Local Bootstrap Files
Update your base.html as follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}My Django Site{% endblock %}</title> <!-- Load Bootstrap CSS locally --> <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"> <link rel="stylesheet" href="{% static 'bootstrap/bootstrap-icons.css' %}"> {% block extra_css %}{% endblock %} </head> <body> {% block content %}{% endblock %} <!-- Load Bootstrap JS locally --> <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script> {% block extra_js %}{% endblock %} </body> </html>
3. Using Bootstrap in Django Templates
Once Bootstrap is properly added, you can start using its components in your templates.
Example of using a Bootstrap button:
<button class="btn btn-primary">Click Me</button>
Example of using Bootstrap Icons:
<i class="bi bi-house"></i>
Conclusion
You now have Bootstrap 5 integrated into your Django project either
through a CDN or locally hosted files. This setup allows you to build
beautiful, responsive websites while keeping control over your
dependencies without relying on third-party Django addons.