Why web page is not showing in full page while upgrading to bootstrap 4.1.3 and jquery 3.6
I am trying to upgrade the Bootstrap version to 4.1.3 and jQuery to 3.6 . But the page is not showing in full screen, it shows in the middle of the screen or we can say the page is broken. Here the code uses some Django formatting.
Html code:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
{% block meta %}
<link rel="icon" href="{% static '/images/logo.jpg' %}">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock meta %}
<title>Portal {% block title %}{% endblock title %}</title>
{% block stylesheets %}
<link rel="stylesheet" href='{% static "/login-assets/bower_components/bootstrap/dist/css/bootstrap.min.css" %}'>
<!--Bootstrap-->
<link rel="stylesheet" href='{% static "/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" %}'>
<!-- Theme style -->
<link rel="stylesheet" href='{% static "/login-assets/dist/css/AdminLTE.css" %}'>
<!-- Custom Login style -->
<link rel="stylesheet" href='{% static "/login-assets/dist/css/custom-login.css" %}'>
<!-- Font Awesome -->
<link rel="stylesheet" href='{% static "/vendors/font-awesome/css/font-awesome.min.css" %}'>
<link rel="stylesheet" href='{% static "/vendors/font-awesome/css/font-awesome-animation.css" %}'>
<link href='{% static "/vendors/sweetalert/css/sweetalert2.min.css" %}' rel="stylesheet">
<style>
body {
width: 100%;
min-height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px;
background-image: url("/static/images/login_background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
position: fixed;
top: 0px;
}
.login-page{
margin-top: 10%;
width: 43%;
padding-top: 0%
}
</style>
{% endblock stylesheets %}
{% endblock head %}
</head>
<body>
{% block body %}
{% block content %}
<!-- {{ content }} -->
{% endblock content %}
{% block js %}
<!-- jQuery -->
<script src='{% static "/vendors/jquery/dist/jquery.min.js" %}'></script>
<!-- jQuery-migrate -->
<script src='{% static "/vendors/jquery/dist/jquery-migrate.min.js" %}'></script>
<!-- Bootstrap -->
<script src='{% static "/vendors/bootstrap/dist/js/bootstrap.js" %}'></script>
<script src='{% static "/vendors/bootstrap/dist/js/bootstrap.min.js" %}'></script>
<script src='{% static "/vendors/bootstrap/dist/js/bootstrap.bundle.js" %}'></script>
<script src='{% static "/vendors/bootstrap/dist/js/bootstrap.bundle.min.js" %}'></script>
<!-- Sweet Alert2 -->
<script src='{% static "/vendors/sweetalert/js/sweetalert2.min.js" %}'></script>
<script src='{% static "/src/js/ajax-core.js" %}'></script>
<!-- jQuery -->
<script src='{% static "/build/js/particles-custom.js" %}'></script>
<script src="/static/vendors/jsencrypt/jsencrypt.min.js"></script>
{% endblock js %}
{% endblock body %}
</body>
Is there any missing JavaScript library or any other issues?Can anyone suggest a solution to solve this problem?