Responsive image
Use .img-fluid className to the img tag
to get responsive image.
<div className="text-center">
<img src={meadia1} className="img-fluid" alt="..."/>
</div>Image With Radius
Use .rounded className along with
.img-fluid to get border radius.
<div className="text-center">
<img src={media2} className="img-fluid rounded" alt="..."/>
</div>Rounded Image
Use .rounded-pill className to
img tag to get rounded image.
<div className="text-center">
<img src={media3} className="img-fluid rounded-pill" alt="..."/>
</div>Image Left Align
<img className="rounded float-start" src={media4} alt="..."/>Image Center Align
<img className="rounded mx-auto d-block" src={media5} alt="..."/>Image Right Align
<img className="rounded float-end" src={media6} alt="..."/>Figures
<figure className="figure">
<img className="bd-placeholder-img figure-img img-fluid rounded card-img" src={media7} alt="..."/>
<figcaption className="figure-caption">A caption for the above image.
</figcaption>
</figure>
<figure className="figure float-end">
<img className="bd-placeholder-img figure-img img-fluid rounded card-img" src={media8} alt="..."/>
<figcaption className="figure-caption text-end">A caption for the above image.
</figcaption>
</figure>Image Thumbnail
Use .img-thumbnail to give an image a
rounded 1px border.
<div className="text-center">
<img src={media9} className="img-thumbnail" alt="..."/>
</div>Rounded Thumbnail
Use .rounded-pill along with
.img-thummbnail to get radius.
<div className="text-center">
<img src={media10} className="img-thumbnail rounded-pill" alt="..."/>
</div>