Bootstrap-4 carousel is ignoring my custom css

@prahladyeri

Copy linkTweet thisAlerts:

Apr 02.2020

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>

I’ve, in fact, even tried overqualifying the `.carousel-control-next-icon` and `.carousel-control-prev-icon` elements 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;
}

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?

Also in #HTML _↴