Exploring the world of bootstrap has been a fun journey, but I've hit a roadblock with the jumbotron element. No matter what I try, I can't seem to successfully add and center an image within the jumbotron using normal CSS3 techniques. Despite my research efforts, I haven't been able to find a solution...
I even assigned a class to the image and attempted to adjust its position using margins, but unfortunately, nothing seems to work. The stubborn picture just won't budge, no matter my efforts.
A big thank you in advance to anyone who can offer some guidance.
EDIT:
HTML:
<div class="middle-container-2">
<div class="jumbotron">
<h1 class="display-3 text-center">Go Pro. Stay on top!</h1>
<p class="lead text-center">Premium gives you access to the Pro scrims instantly and is the only way to support the site!</p>
<img class="mx-auto d-blok text-center unlock-icon" src="Unlock-icon.png" alt="Unlock"/>
<hr class="my-4">
<p class="text-center">It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="read-more-button btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
CSS:
.unlock-icon {
width: 5rem;
height: 5rem;
text-align: center;
}