I am encountering an issue with my template where I have included both Bootstrap and CSS files, with Bootstrap loaded before CSS. However, when I try to apply custom CSS using IDs or classes, the changes do not reflect. Strangely, styling for h1 elements is working as expected.
Here is the code snippet from my layout.html:
{% extends "layout.html" %}
{% block content %}
...
<head>
<!--Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d6cdd0cdd3ce828f938bgbh">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<!--Bootstrap-picker -->
<link href="{{ url_for('static', filename='bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!--Include my own css file-->
<link href="{{url_for('static', filename='main.css')}}" rel="stylesheet">
</head>
...
{% endblock content %}
My main.css file in the static folder contains the following:
h1 {
color: #129944;
}
#my-image-main {
width: 100px;
height: 100px;
}
And here is a snippet from my .html file:
<div class="col">
<img src="{{image}}" class="img-fluid rounded-circle border" id="my-image-main" alt="Profile picture">
</div>
Any suggestions or assistance would be greatly appreciated.