I added a fixed div. to my header at the top in order to make it stay in place, but other elements keep overlapping it.
I tried using suggested fixes such as using a z-index, but the behaviour of these ruins my modal pop-ups.
Is there an easy way to prevent this from happening? I added a margin-bottom but that doesn't do the trick either.
Here's the code I have:
.home-header {
position: fixed;
width: 100%;
background-color: #fff;
}
and the HTML:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %}</title>
<link rel="shortcut icon" href="{% static 'assets/favicon.png' %}"/>
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
<link href="{% static 'css/bootstrap-social.css' %}" rel="stylesheet">
<link href="{% static 'base.css' %}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aladin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
{% block head-extras %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-toggleable-md home-header">
<div class="container">
<a href="/home" class="navbar-brand">
<h1 id="logo" class="nav-wel">Pomodoro</h1>
</a>
{% if request.user.is_authenticated %}
<div class="status">Balance: {{ request.user.profile.coins }}<img class="coin-img" src="{% static 'assets/coin.png' %}" height="40px" width="auto"></div>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle welcome nav-wel" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" id="welcome">Welcome {{ user.get_username }}</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/shop">Shop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/leaderboard">Leaderboard</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/users/change-password">Change Password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/users/logout">Logout</a>
</div>
</li>
</ul>
{% endif %}
</div>
</nav>
{% block content %}
{% endblock %}
<script src="{% static 'js/jquery-3.2.1.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<script src="{% static 'js/pomodoro.js' %}"></script>
</body>
</html>
You can use 2 top level DIVs - one for header, and second for content. Any other stuff must be under content div. If you want your popups to be shown under header - just use absolute position on popup, and set relative to content DIV. Like this:
<div id='header' style='position:fixed;top:0;left:0;width:100%;height:30px;background:pink'>
Header
</div>
<div id='content' style='position:relative;margin-top:30px;background:green' >
Content...
<div id='popup' style='position:absolute;top:0;left:100px;width:100px;height:100px;background:yellow'>Popup</div>
</div>
position: fixed takes the element out of the flow of the rest of the page, so it will overlap unless you position everything else carefully around it - and even then, because fixed positions relative to the viewport not the document, as soon as the user scrolls all bets are off.
If you want to keep it in the flow of the page so that other elements are positioned around rather than behind it, don't use position: fixed (or position: absolute which also allows overlap).
Related
How to apply a stylesheet to a specific nav or div? for instance:
<head>
<meta CharacterSet='UTF-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
{% load static %}
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="{% static 'js/main.js' %}"></script>
{% block script %}{% endblock %}
</head>
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand mb-0" href="#">Pizza</a>
</div>
{% if user is not none %}
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{% block nav_list %}{% endblock %}
</ul>
<form class="navbar-form navbar-right" action="{% url 'logout' %}" method="get">
<span>Welcome, {{ user }}. </span>
<button id="logout" class="btn btn-default btn-sm">Log out</button>
</form>
</div>
{% endif %}
</div>
</nav>
in above code, how to apply "<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">" only to the part of <nav>...</nav>, without affecting the rest of the document.
I have the following base.html and navbar.html files and I am trying to add the Dropdown Menu portion to my Navbar. The menu shows up, but does not 'dropdown' or respond at all to a click. My troubleshooting led me to other posts where I added the following lines to my navbar.html file with no luck. I also tried adding it to the beginning (and end) of the other scripts in my base.html with no change either.
JQuery
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
{% comment %} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> {% endcomment %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"
integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="{% static 'css/base.css' %}" rel="stylesheet">
{% block extracss %}{% endblock %}
<title>{% block title %}title{% endblock title %}</title>
</head>
<body style='background-color:#e7e7e7;'>
{% include 'include/navbar.html' %}
<div class='row' style='background-color: orange;'>
<div class='column' style='padding-left:35px ;float: left; width:17%;background-color: #f1f1f1;'>
test
</div>
<div class='column' style='float: right; width:83%;background-color: #e7e7e7; padding:25px'>
{% block content %}{% endblock content %}
</div>
</div>
{% include 'cms/modal/modal.html' %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{% static 'cms/js/ajax.js' %}"></script>
{% block extrajs %}{% endblock extrajs %}
</body>
</html>
navbar.html
{% load static %}
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand"
href="{% if user.is_staff or user.is_superuser %}{% url 'admin:index' %}{% else %}{% url 'app:home' %}{% endif %}">
<img src="{% static 'img/bootstrap-solid.svg' %}" width="21" height="21" alt="Logo" class="mr-2 mt-n1">xxx
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
</ul>
<a class="nav-link" href="{% url 'account:logout' %}"> Sign out <i class="fas fa-sign-out-alt"></i></a>
</div>
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</nav>
There are a number of issues here:
You're importing JQuery twice. Once in JQuery and once in base. Remove the slim one from your JQuery.
You are importing Bootstrap CSS for 4.0.0, but JS for 4.6.0. You need to use the same version for both CSS and JS.
You are using the syntax data-* and also data-bs-*. The first one is for Bootstrap 4 and the latter one is for Bootstrap 5. You cannot mix these. Choose 1 version and go with it.
Here are the import links for Bootstrap 5:
CSS: <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
JS: <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
And here's a sample B5 dropdown:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
B5 Dropdown Documentation
Note: If you are only importing the JQuery for Bootstrap, then you can remove that as well since B5 doesn't need JQuery.
I am learning DJANGO and while proceeding wanted to give nice look to some pages. I am currently new in programming (only 4 months coding) and mostly spent time with Python, could find time to properly learn front-end.
So my problem is I can`t center LOGIN block in the page. I am using Bootstrap4.5 and gave some Shadow to make object like floating. I now there were similar questions here with answers and tons of tutorial of centering elements either with custom CSS or Bootstrap Flex or Justify and I really tried almost everything I found with no result. Every time time position of Block is getting somewhere else but not center.
My Base HTML:
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/base.css' %}">
<title>Newspaper Project</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
<a class="dropdown-item" href="{% url 'password_change'%}">Change
password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
Log In
Sign up
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<!-- JAVASCRIPT BOOTSTRAP -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
My Login HTML:
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
{% if user.is_authenticated %}
<h2>You are already logged in!</h2>
Log Out
{% else %}
<form class="shadow-lg p-3 mb-5 bg-white rounded login" method="post">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-success" type="submit">Log In</button>
</form>
{% endif %}
{% endblock %}
And attached image how the page is looking.
I really dont know what else I can try to center the login block. All I want is to center it below navbar in remaining space.
Thanks in advance!
You can use text-align attribute for this as following.
<div style="text-align:center"><form id="form_login"><!--form content here--></form></div>
This will center all the content inside the parent DIV. An optional way is to use margin: auto CSS attribute with predefined widths and heights. Please follow the following thread for more information.
Try this, by setting the position to absolute you're positioning your form relative to the outer container, so you can tweak the percentage left and top as you wish.
.div {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
<body>
<div class="div">
<h3> Hi, I'm just an example form 😊</h3>
<input><br>
<input><br>
<button>click me</button>
</div>
</body>
So I have a base.html file, to which I am trying to add a background image. This base.html file is inherited in all other system files, and I am hoping that adding the background image to base.html will automatically add the background image in all those files which inherit it.
I have a master.css file in my static/css path, and I am trying to add the background image to it by:
body{
background-image: url(./background.jpeg);
}
I have put the image in same folder as the master.css.
I am also attaching a screenshot of my file structure.
Where am I going wrong? Any help is appreciated. Thank you.
EDIT 1:
adding my base.html where I am importing the css file.
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>Coupon Portal</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Optional theme -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> -->
<!-- Alternative to Bootstrap 3 Glyphicons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="{% static 'couponSystem/css/master.css'%}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark mynav" role="navigation" id="navbar">
<div class="container">
<div class="navbar-nav align-items-center">
<a class="navbar-brand mynav" href="{% url 'home' %}">The Coupon Portal</a>
</div>
<div class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'accounts:logout' %}" class="btn btn-simple">Log out</a>
{% else %}
<a class="nav-item nav-link" href="{% url 'accounts:login' %}" class="btn btn-simple">Log in</a>
<a class="nav-item nav-link" href="{% url 'accounts:signup' %}" class="btn btn-simple">Sign up</a>
{% endif %}
</div>
</div>
</nav>
<div class="container mycontent">
{% block content %}
{% endblock %}
</div>
</body>
</html>
You are missing quotation marks, try it like this:
body{
background-image: url("background.jpeg");
}
I suspect that the problem could be due to access permissions on the folder where the .jpeg image is placed.
If the image can be opened from browser directly as a url (http://host-name/static/css/background.jpeg), then the background-image will work fine.
Replace this, I thnik it will work.
body{
background-image: url("./static/css/background.jpeg");
}
I have a base.html file and 10+ other pages with different background picture and contents. I tried using {% extends "base.html" %} , but how can I change my background picture and content in each pages if am doing so? Please help me on this case. Thanks in advance.
EDIT
My directory:
And my base.html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Parasol.</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/navbar-static-top.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-static-top.css" rel="stylesheet">
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<style>
{% block additional_styles %}
body {
background:url(static/custom/img/voice.jpg) no-repeat center center fixed;
}
</style>
{% endblock %}
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<a class="navbar-brand" href="{% url "home" %}">Parasol.</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
Photos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Timeline</li>
<li class="active">Quotes<span class="sr-only">(current)</span></li>
<li>Friends</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Just her and the revolution</h1>
<p>
Let's take a trip..
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
There are many different ways to do that, which are dependent on the type of the content, your project and the templates structure. Regarding background picture, you can simply add block to your base.html:
{% block additional_styles %}
<style>
body {
background-image: url(images/base.jpg);
}
</style>
{% endblock %}
and then in your template_1.html (which is the template for some other pages):
{% extends 'base.html' %}
{% block additional_styles %}
<style>
body {
background-image: url(images/1.jpg);
}
</style>
{% endblock %}
In addition to above answer add below tags in base.html
{% block additional_styles %}
{% endblock %}
in your <head> tag.
Like (in base.html)
<head>
{% block additional_styles %}
{% endblock %}
</head>
You may do that by overriding bootstrap's predefined styles either as in css file or extra styles section or superseding a specific sections styles, e.g.
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #32CD32;">
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-image: url({% static "img/ok.jpg" %}); background-repeat: repeat-x;">