Bootstrap 4 CSS Override Not Working Unless Placed in <HEAD>

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>

Answer 1

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!!

Bootstrap 4 CSS Override Not Working Unless Placed in <HEAD>

Question

1 answers

solution1
0 2020-07-16 20:13:57

JS-fiddle link for reference

Bootstrap 4 CSS Override Not Working Unless Placed in <HEAD>

Question

1 answers

solution1 0 2020-07-16 20:13:57

JS-fiddle link for reference

solution1
0 2020-07-16 20:13:57