Add Bootstrap 5

🎨 What is Bootstrap 5?

Bootstrap 5 is a popular CSS framework that provides pre-built components and responsive design utilities. It helps you create beautiful, mobile-friendly Django templates quickly without writing custom CSS.


<!-- Add Bootstrap to your template -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Bootstrap Features

📱

Responsive Grid

Mobile-first layout system

<div class="row">
  <div class="col-md-6">Half</div>
</div>

🧩

Components

Pre-built UI elements

<button class="btn btn-primary">
  Click Me
</button>

🎯

Utilities

Quick styling classes

<div class="p-3 mb-2 bg-primary text-white">
  Styled Box
</div>

📝

Forms

Beautiful form styling

<input type="text" class="form-control" placeholder="Name">

🔹 Add Bootstrap via CDN

The easiest way to add Bootstrap is using a CDN link in your base template. This method requires no installation and loads Bootstrap from external servers.

<!-- templates/base.html -->
<!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 Site{% endblock %}</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    {% block content %}{% endblock %}
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

🔹 Create Bootstrap Navbar

Add a responsive navigation bar to your Django templates using Bootstrap's navbar component. The navbar automatically collapses on mobile devices for better user experience.

<!-- templates/base.html -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="{% url 'home' %}">MySite</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'home' %}">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'about' %}">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

🔹 Style Django Forms

Use Bootstrap classes to make Django forms look professional. Apply form-control class to inputs and form-label to labels for consistent styling.

<!-- templates/contact.html -->
{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
    <h2>Contact Us</h2>
    <form method="post">
        {% csrf_token %}
        
        <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" name="name" required>
        </div>
        
        <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" name="email" required>
        </div>
        
        <div class="mb-3">
            <label for="message" class="form-label">Message</label>
            <textarea class="form-control" id="message" name="message" rows="4"></textarea>
        </div>
        
        <button type="submit" class="btn btn-primary">Send Message</button>
    </form>
</div>
{% endblock %}

🔹 Use Bootstrap Cards

Display content in attractive card components. Cards are perfect for blog posts, products, or any content that needs visual separation and organization.

<!-- templates/posts.html -->
{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        {% for post in posts %}
        <div class="col-md-4 mb-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{{ post.title }}</h5>
                    <p class="card-text">{{ post.excerpt }}</p>
                    <a href="{% url 'post_detail' post.slug %}" class="btn btn-primary">Read More</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

🔹 Install django-bootstrap5

For better Django integration, install the django-bootstrap5 package. This package provides template tags that automatically style Django forms with Bootstrap classes.

# Install package
pip install django-bootstrap5

# settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_bootstrap5',  # Add this
    'myapp',
]

🔹 Use Bootstrap Template Tags

With django-bootstrap5 installed, use template tags to automatically render Django forms with Bootstrap styling. This saves time and ensures consistent form appearance.

<!-- templates/form.html -->
{% extends 'base.html' %}
{% load django_bootstrap5 %}

{% block content %}
<div class="container mt-5">
    <h2>Create Post</h2>
    <form method="post">
        {% csrf_token %}
        {% bootstrap_form form %}
        {% bootstrap_button "Submit" button_type="submit" button_class="btn-primary" %}
    </form>
</div>
{% endblock %}

Template Tag Benefits:

Automatic Bootstrap styling
Error message formatting
Responsive layout
Less code to write