Bootstrap 5 Picture is used to add more than one source to an image component in a webpage. This tag works the same as in normal HTML but we can use the BootStrap utilities and components with it. This is really useful to make responsive designs without using traditional techniques.
To use this, we have to add a default image tag and we can add no or multiple sources of different or even the same image. The <picture> element is used to specify multiple <source> elements for a specific <img>. Add the .img-* classes to the <img> and not to the <picture> tag.
Bootstrap5 Images Picture Class: There is no predefined class for this but you should use the .img-* class to obtain responsiveness, we can use Bootstrap 5 Responsive images to the source element tags.
Syntax:
<picture> <source srcset="..." type="image/svg+xml"> <img src="..." class="img-fluid" alt="..."> </picture>
There are no certain used classes as such in this implementation.
Example 1: The code below demonstrates how we can add multiple images of different resolutions to make it responsive as per the viewport size using the source and img tag inside the picture tag.
<!doctype html> <html lang="en">
<head>
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="m-4 text-success">GeeksforGeeks</h1>
<h4 class="m-4">Bootstrap 5 Images Picture</h4>
<div class="container bg-light">
<picture class="ml-5">
<source srcset=
media="(min-width: 75em)" width="750" height="500">
<source srcset=
media="(min-width: 50em)" width="600" height="400">
<img src=
class="img-fluid" width="400" height="260">
</picture>
</div>
</body>
</html>
|
Output:
Bootstrap 5 Images Picture
Example 2: The code below demonstrates how we can add multiple different images as per the viewport size using the source and img tag inside the picture tag.
<!doctype html> <html lang="en">
<head>
<link href=
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</head>
<body>
<h1 class="m-4" class="text-success">
GeeksforGeeks
</h1>
<h4 class="m-4">
Bootstrap 5 Images Picture
</h4>
<div class="container bg-light">
<picture>
<source media="(max-width:768px)" srcset=
<source media="(max-width:992px)" srcset=
<source media="(max-width:1200px)" srcset=
<img src=
alt="Flowers" class="img-fluid">
</picture>
</div>
</body>
</html>
|
Output:
Bootstrap 5 Images Picture
Reference: https://getbootstrap.com/docs/5.0/content/images/#picture