How to Use Bootstarp Locally as a Static Asset in Django

 How to Use Bootstrap Locally as a Static Asset in Django

In this guide, you’ll learn how to include Bootstrap, jQuery, and Popper.js in your Django project as local static files, instead of using CDN links.

---

🧩 Step 1: Download Bootstrap, jQuery, and Popper.js

🔹 Bootstrap

• Visit: https://getbootstrap.com/docs/4.4/getting-started/download
  
  

• Download “Compiled CSS and JS”
  
  

• Extract the ZIP file: bootstrap-4.4.1-dist.zip
  
  

• You’ll get:
  
  

• bootstrap.min.css (inside css/)
  
  

• bootstrap.min.js (inside js/)
  
  

🔹 jQuery

• Visit: https://jquery.com/download/
  
  

• Right-click “Compressed, production jQuery 3.4.1” and choose:
  
  

• Save link as → jquery-3.4.1.min.js
  
  

🔹 Popper.js

• Visit: https://popper.js.org/
  
  

• Select Version 1
  
  

• Download or right-click → Save link as → popper.min.js
  
  

---

📁 Step 2: Move All Files to Django Static Directory

Place all downloaded files in:

portfolio-project/jobs/static/

Your static folder should now contain:

• css/bootstrap.min.css
  
  

• js/bootstrap.min.js
  
  

• jquery-3.4.1.min.js
  
  

• popper.min.js
  
  

---

⚙️ Step 3: Run collectstatic

Run Django’s collectstatic command to gather all static files into one directory:

python manage.py collectstatic

This step ensures all your static assets are centrally located and ready to serve.

---

🖼️ Step 4: Update home.html to Use Local Bootstrap

Now edit your home.html:

Load static tag at the top:

{% load static %}

1. 
   

2. Replace CSS and JS CDN links with static paths:
   
   

<!-- Bootstrap CSS -->

<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

<!-- jQuery -->

<script src="{% static 'jquery-3.4.1.min.js' %}"></script>

<!-- Popper.js -->

<script src="{% static 'popper.min.js' %}"></script>

<!-- Bootstrap JS -->

<script src="{% static 'js/bootstrap.min.js' %}"></script>

✅ This ensures Bootstrap is now served from your local server, without relying on the internet.

---

✅ Final Result

• Your site loads faster and works offline in development
  
  

• You have full control over the versions of Bootstrap, jQuery, and Popper
  
  

The static setup is now production-ready (especially when using collectstatic with proper static hosting like AWS S3 or Vercel’s static folder mapping)

Changing JavaScript Files to Static Files

To serve your JavaScript files (like jQuery, Popper, and Bootstrap JS) as local static files, follow these steps:

1. Remove any existing CDN src URLs in your HTML.
   
   

2. Use the {% static %} template tag to reference your local static files, for example:
   
   

<script src="{% static 'jquery-3.4.1.min.js' %}"></script>

<script src="{% static 'popper.min.js' %}"></script>

<script src="{% static 'js/bootstrap.min.js' %}"></script>

Make sure the file names match exactly what you placed in your static folder.

---

Finishing Touches in Design

After setting up static assets:

• Connect your URLs to templates via Django views.
  
  

• Create views to render pages and pass data.
  
  

• Design object detail views to show individual records.
  
  

• Use URL paths with parameters to handle dynamic pages (e.g., detail pages by object ID).