How to Integrate and Use Bootstrap 5 in Django

Huzaif Sayyed

5 years ago

Bootstrap, the popular front-end framework, provides a powerful toolkit for creating responsive and visually appealing web applications. When combined with Django, a versatile Python web framework, you can effortlessly build modern and user-friendly websites. In this blog, we’ll walk you through the process of using Bootstrap 5 with Django, demonstrating the integration using CDN (Content Delivery Network) for seamless development.

1. Introduction to Bootstrap 5 and Django

Bootstrap 5 is a widely-used CSS framework that offers pre-designed components, responsive layout systems, and utility classes to streamline web development. Django, on the other hand, is a robust Python web framework known for its scalability and efficient development practices.

2. Benefits of Using CDN for Bootstrap

Using a CDN to include Bootstrap in your Django project offers several advantages:

Faster page loading times due to cached assets.
Reduced server load, as the assets are served from external servers.
Simplified maintenance, as you don’t need to manage and update the framework’s files.

3. Steps to Integrate Bootstrap 5 with Django via CDN

Create a Django Project: Set up your Django project using the standard procedure.
Link to Bootstrap CDN: Open your project’s base template (e.g., base.html) and include the following code in the <head> section:

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

Include jQuery and Bootstrap JavaScript: Just before the closing </body> tag, add the following scripts to ensure Bootstrap’s JavaScript components work:

   <!-- Include Bootstrap JS and jQuery -->
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

4. Applying Bootstrap Styling to Django Templates

Start using Bootstrap classes in your Django templates to style elements. For instance, applying the Bootstrap button class:

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

5. Enhancing UI with Bootstrap Components

Leverage Bootstrap’s pre-designed components to enhance your Django app’s user interface. Incorporate elements like navigation bars, forms, modals, and carousels for a polished look.

<!-- Bootstrap Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">My Website</a>
  <!-- Add navigation links here -->
</nav>

<!-- Bootstrap Form -->
<form class="form">
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username">
  </div>
  <!-- Add more form fields here -->
</form>

<!-- Bootstrap Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal content goes here -->
    </div>
  </div>
</div>

You can check bootstrap 5 components from here.

6. Django template Example with Inheritance:

Certainly! Here’s an example Django template that demonstrates how to use Bootstrap 5 with template inheritance:

base.html (The base template containing common structure and Bootstrap integration)

<!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 App{% endblock %}</title>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">My Website</a>
        <!-- Add navigation links here -->
    </nav>

    <div class="container mt-4">
        {% block content %}
        {% endblock %}
    </div>

    <!-- Include Bootstrap JS and jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

home.html (A child template that extends the base template and adds content)

{% extends "base.html" %}

{% block title %}Home Page{% endblock %}

{% block content %}
<div class="jumbotron">
    <h1 class="display-4">Welcome to My Django App!</h1>
    <p class="lead">This is an example of using Bootstrap 5 with Django.</p>
    <hr class="my-4">
    <p>You can create dynamic and responsive web applications.</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
{% endblock %}

In this example, the base.html template serves as the base structure and includes the Bootstrap CSS and JavaScript via CDN links. The home.html template extends the base.html template using the {% extends %} template tag and overrides the title and content blocks to add specific content to the home page.

By using this template inheritance approach, you can maintain a consistent layout across different pages while customizing the content and structure as needed. The integration of Bootstrap 5 with Django via CDN makes it convenient to use Bootstrap’s styling and components in your web application.

7. Conclusion

Integrating Bootstrap 5 with Django using CDN simplifies the process of creating appealing and responsive web applications. By following these steps and exploring Bootstrap’s components, you can elevate your Django project’s user experience and design aesthetics.

Find this tutorial on Github.