Django & Bootstrap: On Load Modal

Good day

I have the following issue, I have, as far as my knowledge allows me,

I have tried using the bootstrap CDN and also the pip package installer method, but when I try get my modal to show then I cant get it work, could someone have a look at my code and let me know


{% load static %} {% load bootstrap5 %}
<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Landing Page</title>
        {% comment %} Bootstrap {% endcomment %}
        <link rel="stylesheet" href="{% static 'css/style.css' %}" />
        <script type="text/javascript">
            $(window).on("load", function () {
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
        <div class="modal hide fade" id="myModal">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">x</a>
                <h3>Modal header</h3>
            <div class="modal-body">
                <p>One fine body…</p>
            <div class="modal-footer">
                <a href="#" class="btn">Close</a>
                <a href="#" class="btn btn-primary">Save changes</a>
        {% comment %} header {% endcomment %}
            <img src="" alt="" />

        {% comment %} Main Conntent {% endcomment %}
            <div class="row">
                <div class="text-center">
                        class="btn btn-danger py-2 px-5 text-center d-flex align-items-end"

        {% comment %} Footer {% endcomment %}
            <p>give it an ice cold shot</p>

According to the documentation I have included bootstarp54 in my installed apps on the


What is the best practice and the best way to load on a modal on load, I am quite new to all frameworks and I have extensively been learning JavaScript for a while,

Does anyone know if jQuery is included in the pip install pacakges method?

You are trying to use jquery, when it is not necessary (and not available as far as I can see)

You can just use vanilla JS:

window.onload = (event) => {
  console.log("page is fully loaded");
Back to Top