In this post we are going to create a new base.html file which will handle the bootstrap and the most important django messages to display in alert div. We send error or success messages from the backend code using standard messages api and in the front end we display that messages using the bootstrap alert class.
Here is the complete code for base.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockchain Voting System</title>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Include Toastr CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<!-- Add your custom styles if needed -->
<style>
.cta-btn {
margin-top: 30px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<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 'login' %}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'register' %}">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'landing_page' %}">Home</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
{% if messages %}
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<ul class="list-unstyled">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}" {% endif %}>
{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}<strong>Important:</strong> {% endif %}
{{ message }}
</li>
{% endfor %}
</ul>
</div>
{% endif %}
<!-- Content specific to each page goes here -->
{% block content %}
{% endblock %}
</main>
<!-- Bootstrap JS and Toastr JS -->
<!-- Include Bootstrap JS and Toastr JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>Code language: HTML, XML (xml)
