Bootstrap-4 carousel is ignoring my custom css

Below are the carousel arrows which are part of a larger carousel object which I'm trying to customise through my external custom.css:

<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>

Code (CSS):

I've, in fact, even tried overqualifying the .carousel-control-next-icon and .carousel-control-prev-iconelements in my custom.css as follows:

/* BOOTSTRAP-4 CAROUSEL ARROWS */
div#demo a.carousel-control-prev span.carousel-control-prev-icon,
div#demo a.carousel-control-next span.carousel-control-next-icon {
height: 100px;
width: 100px;
outline: black;
background-size: 100%, 100%;
border-radius: 50%;
border: 1px solid black;
background-image: none;
}

div#demo a.carousel-control-next span.carousel-control-next-icon:after
{
content: '>';
font-size: 55px;
color: red;
}

div#demo a.carousel-control-prev span.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: red;
}

HTML:

And still when I open the element in chrome inspector, the arrows are fetching the core styling from _carousel.scss, my custom.css attributes aren't even shown in the debugger window.

I've lint checked my entire custom.css file and there's not a single error in it, so I don't understand where my custom carousel definition is gone. What could be going on here?

 

Hard to tell without the live site, though bootcrap's derpy incompetent way of doing things could be a contributor. (see the endless pointless classes for nothing, scripting only elements in the markup, and general specificity hell it creates)

Though if your properties are NOT showing up in the document inspector at all -- like not even being cancelled/overridden -- then it's likely the file itself just isn't being loaded. Are you 100% certain the include path is correct? Check the network tab of your browser tools. Is the request even there? If it is there is it 404?

Seriously though, that they abuse anchors for scripting only behaviors, need a span inside them when not doing anything that needs a span, and use data- attributes again on scripting only functionality should be waving you off from bootcrap given what a monument to developer ignorance, incompetence, and outright ineptitude it is. I shudder to think what the HTML on the rest of the page looks like.

 

Thanks for responding! This is the page I'm talking about, its a portfolio page on my static blog which is generated through pelican, a static generator:

https://prahladyeri.com/portfolio/

I've temporarily solved the problem by putting that CSS inside a <style> tag in the page's HTML itself, it works that way. However, it doesn't work when I put the same thing in the blog's app.css which is my custom stylesheet! The file is totally accessible and it does style everything else but the carousel elements part aren't styled and those attributes aren't even shown in the Chrome's "inspect element".

Yeah, I know bootstrap sucks a lot but I mostly work only on backend, I'm not a designer, so bootstrap is like a boon for people like us!

 

Most likely your bootstrap styles are redefined by your own.
Try to play with the "position" property.
Indicate where z-index is needed.
Without a live site, of course, it’s hard to say something specific.