Articles → BOOTSTRAP → Image Classes In Bootstrap
Image Classes In Bootstrap
Bootstrap Image Classes
- img-rounded - This class adds rounded corners to the image corner.
- img-circle - This class changes the shape of the image (on the webpage only) to circle.
- img-thumbnail - This class changes the shape of the image (on the webpage only) to thumbnail.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p>
img-rounded example:
<img src="http://gyansangrah.com/ArticleImages/microsoft_bot_framework_architecture_one.jpg" class="img-rounded" width="300" height="148" />
</p>
<p>
img-circle example:
<img src="http://gyansangrah.com/ArticleImages/microsoft_bot_framework_architecture_one.jpg" class="img-circle" width="300" height="148" />
</p>
<p>
img-thumbnail example:
<img src="http://gyansangrah.com/ArticleImages/microsoft_bot_framework_architecture_one.jpg" class="img-thumbnail" width="300" height="148" />
</p>
</div>
</body>
</html>
Output
Click to Enlarge
Image-Responsive Class
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p>
img-rounded example:
<img src="http://gyansangrah.com/ArticleImages/microsoft_bot_framework_architecture_one.jpg" class="img-responsive" />
</p>
</div>
</body>
</html>
Click to Enlarge