I'm creating django site, I have some template and for some reason I'm getting this in django terminal.
[29/Sep/2021 23:36:46] "GET /static/css/bootstrap.min.css.map HTTP/1.1" 404 1834
This is my html code
<!-- Core Stylesheet -->
<link href="{% static 'style.css' %}" rel="stylesheet">
<!-- Responsive CSS -->
<link href="{% static 'css/responsive.css' %}" rel="stylesheet">
Tried to add here, <link href="{% static 'css/bootstrap.min.css.map' %}" rel="stylesheet"> but not working. Still same.
This style.css, is doing this.
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900');
@import 'css/bootstrap.min.css';
@import 'css/owl.carousel.min.css';
@import 'css/animate.css';
@import 'css/magnific-popup.css';
@import 'css/font-awesome.min.css';
I only get error for first one, and I'm having a problem with my site style, some functions are not working. But I'm getting, with .map extention.
What I need to do?
EDIT This is base.html Most of html code is here. Flex is not working on some parts of page, I'm thinking that this problem might me be solution to flex.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Title -->
<title>Competitiveness index</title>
<!-- <title>Eagles flying early | Base</title> -->
<!-- Favicon -->
<link rel="icon" href= "{% static 'img/core-img/logo_ci.svg' %}"
<!-- Core Stylesheet -->
<link href= "{% static 'style.css' %}" rel="stylesheet">
<!-- Responsive CSS -->
<link href= "{% static 'css/responsive.css' %}" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href= "{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<style type="text/css">
.flex-container {
display: flex;
}
</style>
</head>
<body>
<!-- ***** Preloader Start ***** -->
<div id="preloader">
<div class="mosh-preloader"></div>
</div>
<!-- ***** Header Area Start ***** -->
<header class="header_area">
<div class="container-fluid h-100">
<div class="row h-100">
<!-- Menu Area Start -->
<div class="col-12 h-100">
<div class="menu_area h-100">
<nav class="navbar h-100 navbar-expand-lg align-items-center">
<!-- Logo -->
<a class="navbar-brand" href="index.html"><img src="{% static 'img/core-img/logo_ci.svg' %}" alt="logo" width="50" height="60">Competitiveness index</a>
<!-- Menu Area -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mosh-navbar" aria-controls="mosh-navbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-end" id="mosh-navbar">
<ul class="navbar-nav animated" id="nav">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="moshDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
<div class="dropdown-menu" aria-labelledby="moshDropdown">
<a class="dropdown-item" href="index.html">Home</a>
<a class="dropdown-item" href="about.html">About Us</a>
<a class="dropdown-item" href="services.html">Services</a>
<a class="dropdown-item" href="portfolio.html">Portfolio</a>
<a class="dropdown-item" href="blog.html">Blog</a>
<a class="dropdown-item" href="contact.html">Contact</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="elements.html">Elements</a>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
<li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
<!-- Search Form Area Start -->
<div class="search-form-area animated">
<form action="#" method="post">
<input type="search" name="search" id="search" placeholder="Type keywords & hit enter">
<button type="submit" class="d-none"><img src="{% static 'img/core-img/search-icon.png' %}" alt="Search"></button>
</form>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- ***** Header Area End ***** -->
<!-- ***** Breadcumb Area Start ***** -->
<div class="mosh-breadcumb-area" style="background-image: url({% static 'img/core-img/breadcumb.png' %})">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12">
<div class="bradcumbContent">
<h2>{{page_title}}</h2>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">{{page_title}}</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- ***** Breadcumb Area End ***** -->
{% block content %}{% endblock %}
<!-- ***** Footer Area Start ***** -->
<footer class="footer-area clearfix">
<!-- Top Fotter Area -->
<div class="top-footer-area section_padding_100_0">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg-3">
<div class="single-footer-widget mb-100">
<a href="#" class="mb-50 d-block"><img src="{% static 'img/core-img/logo_ci.svg' %}" width= 100 height=100 alt=""></a>
<p>Etiam nec odio vestibulum est mattis effic iturut magna. Pellent esque sit amet tellus blandit. Etiam nec odio vestibul.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="single-footer-widget mb-100">
<h5>Fast links</h5>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Services & Features</a></li>
<li><a href="#">Accordions and tabs</a></li>
<li><a href="#">Menu ideas</a></li>
</ul>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="single-footer-widget mb-100">
<h5>Blog</h5>
<div class="footer-single--blog-post">
<a href="#" class="blog-post-date">
<p>23 September, 2017</p>
</a>
<a href="#" class="blog-post-title">
<h6>Why we love stock photos</h6>
</a>
</div>
<div class="footer-single--blog-post">
<a href="#" class="blog-post-date">
<p>22 September, 2017</p>
</a>
<a href="#" class="blog-post-title">
<h6>Designin on grid. A few rules. </h6>
</a>
</div>
<div class="footer-single--blog-post">
<a href="#" class="blog-post-date">
<p>20 September, 2017</p>
</a>
<a href="#" class="blog-post-title">
<h6>2017 World Design Congress</h6>
</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="single-footer-widget mb-100">
<h5>Contact Info</h5>
<div class="footer-single-contact-info d-flex">
<div class="contact-icon">
<img src="img/core-img/message.png" alt="">
</div>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Fotter Bottom Area -->
<div class="footer-bottom-area">
<div class="container h-100">
<div class="row h-100">
<div class="col-12 h-100">
<div class="footer-bottom-content h-100 d-md-flex justify-content-between align-items-center">
<div class="copyright-text d-flex"><p>
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- ***** Footer Area End ***** -->
<!-- ***** Footer Area End ***** -->
<!-- jQuery-2.2.4 js -->
<script type="text/javascript" src="{% static 'js/jquery-2.2.4.min.js' %}"></script>
<!-- Popper js -->
<script type="text/javascript" src="{% static 'js/popper.min.js' %}"></script>
<!-- Bootstrap js -->
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<!-- All Plugins js -->
<script type="text/javascript" src="{% static 'js/plugins.js' %}"></script>
<!-- Active js -->
<script type="text/javascript" src="{% static 'js/active.js' %}"></script>
</body>
</html>
CodePudding user response：
I'm assuming you have a base.html to inherit into your other templates, if so, check that you have the following structure:
<head>
{% block bootsrap %}
{% load bootstrap4 %}
{# CSS Bootstrap #}
{% bootstrap_css %}
{% endblock bootsrap %}
<meta charset="UTF-8">
<title></title>
{% comment %} Styles CSS {% endcomment %}
<link rel="stylesheet" href="{% static 'css/normalize.css' %}">
<link rel="stylesheet" href="{% static 'css/modified.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
For what I see you are missing the {% load bootstrap4 %} and {%bootstrap_css %}. Hope that helps, if not, let me know so I can try to debug again.