ApiDemos™Bootstrap 5 Images
Rounded corners picture
The .rounded class allows images to display rounded corners:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Rounded corners picture(apidemos.com)</h2>
<p>.rounded class allows images to be displayed with rounded corners:</p>
<img src="https://apidemos.geek-docs.com/bootstrap/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>Output:
Oval pictures
.rounded-circle class can set the oval image:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Oval pictures(apidemos.com)</h2>
<p>.rounded-circle Classes can set oval images:</p>
<img src="https://apidemos.geek-docs.com/bootstrap/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
</div>
</body>
</html>Output:
Thumbnails
The .img-thumbnail class is used to set the image thumbnail (the image has a border):
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Thumbnails(apidemos.com)</h2>
<p>.img-thumbnail class for setting image thumbnails (images with borders):</p>
<img src="https://apidemos.geek-docs.com/bootstrap/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>Output:
Image alignment
Use the .float-start class to set the image left-aligned and the .float-end class to set the image right-aligned:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Image alignment(apidemos.com)</h2>
<p>Use the .float-start class to set the image left-aligned and the .float-end class to set the image right-aligned:</p>
<img src="https://apidemos.geek-docs.com/bootstrap/cinqueterre.jpg" class="float-start" alt="Paris" width="304" height="236">
<img src="https://apidemos.geek-docs.com/bootstrap/cinqueterre.jpg" class="float-end" alt="Paris" width="304" height="236">
</div>
</body>
</html>Output:
Image centering
Use the .mx-auto (margin:auto) and . d-block (display:block) classes to center align images：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Image centering(apidemos.com)</h2>
<p>Use the .mx-auto (margin:auto) and .d-block (display:block) classes to set the image center alignment:</p>
<img src="https://apidemos.geek-docs.com/bootstrap/cinqueterre.jpg" class="mx-auto d-block" style="width:50%">
</div>
</body>
</html>Output:
Responsive images
Images come in a variety of sizes, and we need to automatically adapt them to the size of the screen.
We can set up responsive images by adding the .img-fluid class to the <img> tag.
The .img-fluid class sets max-width: 100%; , height: auto; :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Responsive images(apidemos.com)</h2>
<p>.img-fluid class can set responsive images, reset the browser size to see the effect:</p>
<img src="https://apidemos.geek-docs.com/bootstrap/cinqueterre.jpg" class="img-fluid">
</div>
</body>
</html>Output:
