Struggling to get my custom css to take precedence over Bootstrap4 components in my Django project.
I'm a beginner in front-end development and I'm hoping to articulate my question clearly. Note: This is an HTML sheet within a Django project. My custom css sheet is linked correctly as it successfully styles other components (non-bootstrap) on the page.
The only way I've managed to override any Bootstrap components is by directly including the style as an HTML attribute, like in the example below where I set the background of the first row to blue. I've been grappling with this issue for a couple of days now, and all I seem to find is advice to ensure that your custom stylesheet is loaded after the Bootstrap stylesheet. My home.css sheet is indeed loaded after the Bootstrap CSS, but I'm unsure if the way Django loads these files is causing conflicts with the order.
Any help or suggestions on how to troubleshoot this would be greatly appreciated. Thank you.
{% load staticfiles %}
<head>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&display=swap" >
<link rel="stylesheet" href="{% static 'css/home.css' %}" >
</head>
<body>
<!--################# START OF CARD #################-->
{% for product in products.all %}
<div class="card-group">
<div class="card mb-3">
<!-- start second row -->
<div id = "top" style = "background: blue;" class="row no-gutters">
<div class="col-md-6 d-flex">
<div class="card-img-body">
<img src="{{ product.img_url }}" class="card-img img-fluid">
</div>
</div>
<div class="col-md-6 d-flex align-items-center">
<div class="card-body">
<h4 class="card-title text-center">{{product.title}}</h4>
<p class="card-text">{{product.body}}</p>
<p class="card-text text-right"><small class="text-muted">{{product.date_posted_pretty}}</small></p>
</div>
</div>
</div>
<!-- start second row -->
<div class="secondary row no-gutters d-none">
<div class="col-md-6 d-flex align-items-center">
<div class="card-body">
<h6 class="card-subtitle text-center">{{product.product_name}}</h6>
<p class="card-text "><small class="text-muted">{{product.product_description}}</small></p>
</div>
</div>
<div class="col-md-6 d-flex align-items-center">
<div class="card-body text-center">
<a class="btn btn-light" href="#" role="button">Product</a>
<a class="btn btn-light" href="#" role="button">Homepage</a>
<a class="btn btn-light" href="#" role="button">Mission</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<!--################# END OF CARD #################-->
</body>
And below is the CSS I've attempted, targeting both class and ID selectors.
.row .no-gutters{
background: blue;
}
#top {
background: blue;
}
Despite removing the style attribute, my expectation was for this CSS to override the Bootstrap components, but unfortunately, this is not the case.