Circle accents for indicating features and screenshots of a product.
Code:
<div class="row">
<div class="col-md-3">
<img src="http://via.placeholder.com/500x500" alt="" class="img-fluid rounded-circle border border-primary mt-2">
<a href="#" class="btn btn-dark btn-block mt-2">Lorem Ipsum</a>
</div>
<div class="col-md-3">
<img src="http://via.placeholder.com/500x500" alt="" class="img-fluid rounded-circle border border-primary mt-2">
<a href="#" class="btn btn-dark btn-block mt-2">Lorem Ipsum 2</a>
</div>
<div class="col-md-3">
<img src="http://via.placeholder.com/500x500" alt="" class="img-fluid rounded-circle border border-primary mt-2">
<a href="#" class="btn btn-dark btn-block mt-2">Lorem Ipsum 3</a>
</div>
<div class="col-md-3">
<img src="http://via.placeholder.com/500x500" alt="" class="img-fluid rounded-circle border border-primary mt-2">
<a href="#" class="btn btn-dark btn-block mt-2">Lorem Ipsum 4</a>
</div>
</div>