Currently, I am attempting to modify the right property for a h1 element which is inheriting from the carousel-caption bootstrap class. It currently inherits right: 15%, but I would like to set it to 0%. After following advice from another post, I added id="bootstrap-overrides" to the div tag and used the selector: #bootstrap-overrides h1.second. However, this did not successfully override the property. Upon inspecting the element, I noticed that the property was not crossed out. Interestingly, when I manually unchecked the property in the inspect element, the desired behavior was achieved.
Below is the code snippet from my React component:
<div id="initialImage">
<img src={logo} alt="Failed to load Image" class="img-fluid" />
<div class="carousel-caption greeting">
<h1 class="first">First.</h1>
<h1 class="second">Second.</h1>
</div>
</div>
The CSS styling is as follows:
#bootstrap-overrides h1.second {
right: 0%;
float: right;
font-family: "Rock Salt", cursive;
color: #fff2f4;
}
I have included an id #bootstrap-overrides in the body tag of my index.html file. Could the issue possibly be related to the import location for Bootstrap?