After browsing through advice given on this Stack Overflow thread, I attempted to implement my own CSS solution:
#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;
}
Unfortunately, this approach was ineffective. Bootstrap 4's default styles prevailed for reasons unknown. Here is a snippet of the Bootstrap CSS in question:
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner::after {
display: block;
clear: both;
content: "";
}
// The .slide class doesn't seem to be explicitly defined anywhere.
I placed my CSS declarations after Bootstrap's link in the head section of my HTML file:
<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>
While inserting my overriding styles directly into the <head> area resolved the issue, I remain puzzled as to why specifying an id and class in my CSS didn't produce the desired result. Despite my flawed understanding of cascading styles in this context, shouldn't my CSS have taken precedence over Bootstrap's? Does anyone have insights into what kind of style supremacy Bootstrap employs?
Update: Below is the relevant HTML structure for reference:
<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>