Bootstrap CDN переопределяет пользовательский CSS в Django
Я перепробовал все, что упоминается в интернете, но все же bootstrap CDN переопределяет пользовательский файл CSS. HTML файл:
{%extends 'movies/base.html'%}
{%block content%}
{% load static %}
<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<div class="section">
<h1>Recommend Me:</h1>
<form action="recommendation" method="post">
{% csrf_token %}
<input type="text" name="emotion" />
<button type="submit" name="button">Find</button>
</form>
<div class="video-container">
<div class="color-overlay"></div>
<video autoplay loop muted >
<source src="{% static 'movies/intro.mp4' %}" type="video/mp4">
</video>
</div>
</div>
<div class="shows">
<h2 class="mt-5">Shows you might like:</h2>
<br>
<div class="row">
{%for tvshow in tvshows%}
<div class="col-lg-5 col-md-6">
<a href="{{ tvshow.url }}">
<img src="{{ tvshow.image.url }}" class="img-fluid mb-2">
</a>
<h3>{{ tvshow.title }}</h3>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
{%endblock%}
Я попробовал добавить атрибут !important в CSS, но это не помогло.
CSS файл:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins';
}
.video-container video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 570px;
object-fit: cover;
z-index: 1;
opacity: 0.8;
}
.section h1{
position: relative;
text-align: center;
font-size: 4rem;
padding: 20px;
margin: 15px;
top: 100px;
z-index: 2;
opacity: 0.6;
}
.section form{
position: relative;
text-align: center;
font-size: 4rem;
padding: 20px;
margin: 15px;
z-index: 2;
top: auto;
}
.color-overlay{
position: absolute;
top: 0;
left: 0;
background: #03a9f4;
width:100%;
height: 100%;
mix-blend-mode: overlay;
}
.shows{
position: relative;
height:400px;
top: 230px;
padding: 20px;
width:100%;
}
Я также присвоил ID тегу body и затем изменил файл CSS, например: #mypage .section но все равно ничего не получилось.
Если я удалю ссылку bootstrap CDN из заголовочного файла, то пользовательский CSS-файл будет работать как шарм. Я понятия не имею, почему bootstrap CDN переопределяет пользовательский CSS файл.
HTML файл расширяется base.html поэтому я просто хотел сказать, что base.html не имеет никаких bootstrap вещей, прикрепленных к нему. В нем нет таблиц стилей.
Пожалуйста, помогите! Спасибо.