Is there a way to resize and round the image within a bootstrap-5 card? I am unsure of how to achieve this using either bootstrap-5 or css3. My goal is to have the image appear smaller and rounded in the center of the card.
Sample Code:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcded3d3c8cfc8ceddccfc89928c928e">[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center">
<div class="col">
<div class="card text-center">
<img class="rounded" src="https://3.imimg.com/data3/LE/LH/GLADMIN-37134/school-badges-500x500.jpg" alt="">
<h1 class="text-primary">{{board.school_name}}</h1>
<p>{{board.school_address}}, {{board.location}}</p>
<p>P O Box: {{board.p_o_box}}</p>
</div>
</div>
</div>
</div>