Bootstrap 4 CSS Override Not Working Unless Placed in

Question

Following the solution from this SO Question, I put this in my own CSS:

#bootstrap-override .carousel.slide {
      max-width: 1920px;
      min-width: 900px;
      overflow: hidden;
      margin-left: auto;
      margin-right: auto;
    }

#bootstrap-override .carousel-inner {
      width: 1920px;
      left: 50%;
      margin-left: -960px;
    }

But... it doesn't work. Bootstrap 4's own CSS wins for some reason. Here's Bootstrap's CSS:

.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}
// the .slide class doesn't appear anywhere (I'm guessing it's just used by the JS, but I don't know that).

My CSS is defined after Bootstrap's, as well:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed&display=swap">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="./css/index.css">
  <title>...</title>
</head>

If I place my overriding CSS in the <head> it works correctly (and I get why) but I don't understand why it isn't working when I specify an id+class in my own CSS. As I understand it (which, at this point, must be very wrong) my CSS should have won out over Bootstrap's CSS even without specifying the id. Anybody know what kind of Cascading-Style-Steroids Bootstrap is juicing with?

Edit: Adding in the relevant HTML, as requested.

<body id="bootstrap-override">
    <div id="carousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
        </ol>
        <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        <div class="carousel-inner" style="height: 100%;"">
            
            <div class=" carousel-item active">
                <img class="d-block" src="./res/image.png" alt="First slide">
                <div class="carousel-caption d-none d-md-block">
                    <table style="margin-left:auto; margin-right:auto;">
                        <tr>
                            <td class="align-middle">
                                <img src="./res/logo.png" alt="...">
                            </td>
                            <td class="align-middle">
                                <h3>...</h3>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="carousel-item">Slide #2...</div>
            <div class="carousel-item">Slide #3...</div>
            
        </div>
    </div>
</body>

We need your HTML too. First check if you have a block with the `id="bootstrap-override" ` attribute. — Gleb Kemarsky, Jul 16 '20 at 19:43
Have you checked if adding ``` !important``` at the end of each one of your overrides, like ```left: 50% !important;``` solves the problem? — Daniela C. Montenegro, Jul 16 '20 at 19:44
I haven't tried `!important;` as (essentially) everything I have ever read (including the vast majority of CSS-related SO Questions) is pretty hardcore about never solving CSS specificity problems with that. Philosophically, I don't like it as a solution, either, as it's going to WET down my CSS pretty badly if I have to do that for every Bootstrap CSS override I write now or in the future. Were you just suggesting it as just a test? — Darkly, Jul 16 '20 at 20:24

Christie Dsouz · Answer 1 · 2020-07-16T20:58:09.757

Can you check out the following possibilities -:

Is the following css file linked actually working ?, just try to give body a background color.
If the css class is linked properly then is naming of the classes + id proper?
If proper then sharing a carousal example where I overide Bootstraps carousal css. Hope it is helpful. If this is not helpful please can you help with, little more details like sample html tags of your carousal.

thank you.

JS-fiddle link for reference

Custome CSS

#carouselExampleControls {
  height: 100px;
  text-align: right;
  background: gray;
}

.img-fluid {
  max-height: 100px;
}

Html

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"  xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect  fill="#777"></rect><text x="50%" y="35%" fill="#555" dy=".3em">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <img class="img-fluid" src="https://thumbs.dreamstime.com/b/dead-tree-tall-portrait-view-blue-sky-background-57002950.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="img-fluid" src="https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

https://jsfiddle.net/chris495b/e0jzumnc/3/

Hey if you have properly linked your files it should show in the devtools like the screen shot below.can you please share that as well.It would be really helpful in debugging the issue!!

I can confirm that my CSS file is linked correctly and being interpreted by Chrome. (It has other stuff in it besides what I posted here, which are working correctly.) As far as naming things correctly, I believe I have. Someone else requested that I share the relevant HTML (I suspect to rule out the same thing) so I have. — Darkly, Jul 16 '20 at 20:28
Hey if you have properly linked your files it should show in the devtools like the screen shot above.can you please share that as well.It would be really helpful in debugging the issue!! — Christie Dsouz, Jul 16 '20 at 20:58

Bootstrap 4 CSS Override Not Working Unless Placed in

1 Answers1

JS-fiddle link for reference