Would appreciate help centering this card in the web browser. I'm using Bootstrap5 and struggling to get it centered. Can anyone assist me with centering the card using either bootstrap5 or css3?
I'm currently utilizing Bootstrap5.
The Card
<div class="container">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="https://thumbs.dreamstime.com/b/young-black-man-smiling-to-camera-his-desk-office-young-black-man-smiling-to-camera-his-desk-office-108952653.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
Even when attempting to add justify-content-center to a row, I'm still encountering issues with centering.
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="https://thumbs.dreamstime.com/b/young-black-man-smiling-to-camera-his-desk-office-young-black-man-smiling-to-camera-his-desk-office-108952653.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>