Bootstrap 5 Images
Last Updated :
10 Apr, 2024
Bootstrap 5 provides classes for responsive images, ensuring they scale appropriately within their parent elements, maintaining aspect ratio, and enhancing appearance across devices without overflowing.
Types of Images:
| Term | Description |
|---|
| Responsive images | Resize images according to parent element and screen sizes, maintaining aspect ratio. |
| Image thumbnails | Add a 1px rounded border around the image. Represents a smaller version of a larger image. |
| Aligning images | Set alignment of images using float or text alignment classes. .mx-auto can center block-level images. |
| Picture | <picture> element specifying multiple <source> elements for a specific <img>. |
Example 1: In this example, we will create a responsive image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Images</title>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Images</h2>
<img
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png"
class="img-fluid"
alt="GFG"
/>
</div>
</body>
</html>
Output:
Example 2: In this example, we will create a thumbnail image.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Images</title>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Bootstrap 5 Images</h2>
<img
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="img-thumbnail"
alt="GFG"
/>
</div>
</body>
</html>
Output:
Share your thoughts in the comments
Please Login to comment...