Django with Bootstrap

Using Bootstrap in Django is straightforward and enhances the design of your web application with minimal effort. Here’s a step-by-step guide:

1. Include Bootstrap in Your Project

Option 1: Use a CDN (Recommended)

You can directly include Bootstrap via a CDN in your Django templates.

Add the following <link> and <script> tags to your base template (e.g., base.html):


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Django App</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <!-- Your content goes here -->

    <!-- Bootstrap JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Option 2: Install Bootstrap Locally

If you prefer local files, download Bootstrap from Bootstrap’s official website or install it using npm or yarn.

1. Download the CSS and JS files.

2. Place them in a static folder in your Django app


myapp/static/css/
myapp/static/js/

3. Link the files in your base.html template:

2. Set Up Django’s Static Files

Ensure your static files are configured in settings.py:


STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

3. Use Bootstrap in Your Templates

Now you can use Bootstrap classes in your Django templates. For example:


<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>