---
title: "How do you create responsive images and videos using Bootstrap classes?"  
description: "How do you create responsive images and videos using Bootstrap classes?"  
author: "Revati S Misra"  
published: 2023-05-12  
updated: 2023-05-12  
canonical: https://www.mindstick.com/forum/158315/how-do-you-create-responsive-images-and-videos-using-bootstrap-classes  
category: "bootstrap"  
tags: ["bootstrap", "responsive design", "html form"]  
reading_time: 2 minutes  

---

# How do you create responsive images and videos using Bootstrap classes?

How do you create [responsive images](https://www.mindstick.com/forum/158443/what-are-some-techniques-for-implementing-responsive-images-on-a-website-to-display-on-all-devices) and videos using [Bootstrap classes](https://www.mindstick.com/forum/156617/collapsible-navbar-with-logo-with-the-help-of-bootstrap-classes)?

## Replies

### Reply by Aryan Kumar

[Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) provides a number of classes that can be used to create [responsive](https://www.mindstick.com/blog/11940/tips-for-fast-responsive-web-design-in-2018) [images](https://www.mindstick.com/interview/1067/what-is-the-php-predefined-variable-that-tells-the-what-type-of-images-that-php-support) and videos. These classes allow you to ensure that your images and videos will display correctly on all devices, regardless of the screen size.

To create a responsive image, simply add the class img-fluid to the <img> tag. This will ensure that the image will scale to fit the width of its container.

To create a responsive video, simply add the class video-fluid to the <video> tag. This will ensure that the video will scale to fit the width of its container.

In addition to the img-fluid and video-fluid classes, Bootstrap also provides a number of other classes that can be used to style images and videos. These classes include:

- **rounded** - Rounds the corners of the image or video.
- **img-thumbnail** - Displays the image as a thumbnail.
- **img-responsive** - Makes the image responsive.
- **video-responsive** - Makes the video responsive.

For a complete list of Bootstrap's classes for images and videos, please see the Bootstrap documentation.

Here is an example of how to create a responsive image using Bootstrap classes:

HTML

```html
<img src="image.jpg" class="img-fluid">
```

This will ensure that the image will scale to fit the width of its container.

Here is an example of how to create a responsive video using Bootstrap classes:

HTML

```html
<video src="video.mp4" class="video-fluid">
</video>
```

This will ensure that the video will scale to fit the width of its container.

Bootstrap's classes for images and videos are a powerful tool that can help you create beautiful and responsive websites and web applications.


---

Original Source: https://www.mindstick.com/forum/158315/how-do-you-create-responsive-images-and-videos-using-bootstrap-classes

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