Bootstrap4

biscuit/core/templates/core/base.html

-{% extends "bootstrap3/bootstrap3.html" %}
-{% load bootstrap3 menu staticfiles %}
+{% extends "bootstrap4/bootstrap4.html" %}
+{% load bootstrap4 menu staticfiles font_awesome any_js %}
 
-{% block bootstrap3_title %}BiscuIT School Information System{% endblock %}
+{% block bootstrap4_title %}BiscuIT School Information System{% endblock %}
 
-{% block bootstrap3_extra_head %}
+{% block bootstrap4_extra_head %}
+ {% include_css "DataTables" %}
  <link rel="stylesheet" href="{% static 'style.css' %}" />
- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.css"/>
  <link rel="shortcut icon" href="#" />
 {% endblock %}
 
-{% block bootstrap3_extra_script %}
- <script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.js"></script>
+{% block bootstrap4_extra_script %}
+ {% include_js "DataTables" %}
  <script type="text/javascript" src="{% static 'js/main.js' %}" /></script>
 {% endblock %}
 
-{% block bootstrap3_content %}
- <nav class="navbar navbar-default">
-  <div class="container-fluid">
-   <div class="navbar-header page-scroll">
-    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main">
-     <span class="sr-only">Toggle navigation</span>
-     <span class="glyphicon glyphicon-th-list"></span>
+{% block bootstrap4_content %}
+ <nav class="navbar navbar-light bg-light navbar-expand-md">
+    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-main">
+     {% fa 'fa-align-justify' %}
     </button>
     <a class="navbar-brand" href="{% url "index" %}">
      <span class="glyphicon glyphicon-briefcase"></span> BiscuIT School Information System
@@ -29,8 +26,8 @@
 
    <div class="collapse navbar-collapse" id="navbar-main">
     {% generate_menu %}
-    <ul class="nav navbar-nav navbar-right">
-     {% with menu=menus.main %}{% include "bootstrap-navbar.html" %}{% endwith %}
+    <ul class="nav navbar-nav ml-auto">
+     {% with menu=menus.main %}{% include "bootstrap4-navbar.html" %}{% endwith %}
     </ul>
    </div>
   </div>