<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container">
  <h2>Bootstrap 4 Responsive Images</h2>
  
  <h5>Image with Rounded Corners (Aligned Left)</h5>          
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7WcBYCIOQZhd0ZmK40YI8TSa9B7w8lXj9lg&usqp=CAU" class="rounded .img-fluid"> 
  <br> <br>
  <h5>Image Shaped into Circle(Centre Aligned)</h5>           
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7WcBYCIOQZhd0ZmK40YI8TSa9B7w8lXj9lg&usqp=CAU" class="rounded-circle mx-auto d-block .img-fluid" >
  <br>
  <h5>Thumbnail Image (Aligned Right)</h5>  
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7WcBYCIOQZhd0ZmK40YI8TSa9B7w8lXj9lg&usqp=CAU" class="rounded float-right .img-fluid">
</div>

</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.