1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Bootstrap-4 carousel is ignoring my custom css

Discussion in 'HTML & Website Design' started by Prahlad Yeri, Apr 2, 2020.

  1. #1
    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.
    SEMrush
    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?
     
    Prahlad Yeri, Apr 2, 2020 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,327
    Likes Received:
    1,821
    Best Answers:
    244
    Trophy Points:
    515
    #2
    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.
     
    deathshadow, Apr 3, 2020 IP
  3. Prahlad Yeri

    Prahlad Yeri Active Member

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #3
    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!
     
    Prahlad Yeri, Apr 3, 2020 IP
  4. ZoyaHall

    ZoyaHall Peon

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    1
    #4
    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.
     
    ZoyaHall, Apr 20, 2020 IP