Bootstrap img src - CSS

Bootstrap is a CSS framework that allows developers to create responsive and mobile-first web applications. One of the many features of Bootstrap is the ability to add images to your website using the "img" tag. In this article, we will show you how to use the "img" tag in Bootstrap, the difference between "src" and "background-image" and how to use CSS to style your images.

Adding Images with "img" Tag in Bootstrap

To add an image using the "img" tag in Bootstrap, simply add the tag to your HTML and include the image URL in the "src" attribute:

<img src="image-url">

For example, to add an image with the URL "https://example.com/image.jpg", use the following code:

<img src="https://example.com/image.jpg">

"src" vs "background-image"

The "src" attribute in the "img" tag specifies the URL of the image that you want to display. On the other hand, the "background-image" property in CSS specifies the URL of an image to be used as the background of an element. Here's an example of how to use "background-image" in CSS:

<div style="background-image: url('background-image-url')"></div>

Styling Images with CSS

You can style your images using CSS to make them more visually appealing. Here are a few CSS properties you can use to style your images:

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

The "width" and "height" properties set the size of the image. The "object-fit" property specifies how the image should fit inside its container. The "border-radius" property adds rounded corners to the image.

Conclusion

Bootstrap makes it easy to add images to your web application using the "img" tag. You can also use CSS to style your images, making them more visually appealing and helping to create a better user experience.