---
title: "How to set the responsive image on container in bootstrap 5?"  
description: "How to set the responsive image on container in bootstrap 5?"  
author: "Steilla Mitchel"  
published: 2022-01-04  
updated: 2022-01-04  
canonical: https://www.mindstick.com/forum/156872/how-to-set-the-responsive-image-on-container-in-bootstrap-5  
category: "bootstrap"  
tags: ["bootstrap", "web application", "website design"]  
reading_time: 1 minute  

---

# How to set the responsive image on container in bootstrap 5?

How to set the [responsive](https://www.mindstick.com/blog/11940/tips-for-fast-responsive-web-design-in-2018) [image](https://www.mindstick.com/articles/23551/an-investigate-distinctive-seafood-restaurant-for-your-image-stamp-character) on [container](https://www.mindstick.com/forum/159610/how-to-connect-a-windows-container-to-a-service-running-on-localhost) in [default](https://www.mindstick.com/interview/12771/what-is-the-importance-of-default-resources) [size](https://www.mindstick.com/forum/159799/how-can-you-manage-the-size-of-mdf-and-ldf-files) of image in [bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) 5?

## Replies

### Reply by Manish Sharma

**Responsive** **Image on container in bootstrap 5**

You can set the default size of image on <div> container in your design page of your website page by using the following bootstrap code,

```
<div class='container-fluid'>
<img src='C:\Users\msclient008\Desktop\Link\pic.png' class='img-fluid' alt='feature-img'>
</div> 
```

![How to set the responsive image on container in bootstrap 5?](https://www.mindstick.com/mindstickforums/72ae2e63-d230-451b-8117-670883ca0d7e/images/8673aaa0-24f2-4d4b-b7ae-21b59acb3e7c.png)\

the above image is set its default size on container and if you want to set the specific size of the image then bootstrap 5 provide class the set the size of image like as,

```
<div class='container-fluid'>
<img src='C:\Users\msclient008\Desktop\Link\pic.png' class='img-fluid h-100 w-100' alt='feature-img'>
</div> 
```

h-100 is use to set the 100% height of image and w-100 is used for 100% width of image


---

Original Source: https://www.mindstick.com/forum/156872/how-to-set-the-responsive-image-on-container-in-bootstrap-5

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.