Image in bootstrap

Image Bootstrap is incredible because of it makes dealing with images easy (responsive images, so they don‘t “break” your website on a phone, and show quick style options such as rounded corners without custom CSS needed).

Another way to think about this is: Bootstrap is a bunch of ‘stickers’ or classes to throw onto your <img> tag to make things work!

1. The “Must-Have” Class: Responsive Images

Standard images are fixed with in HTML, too. For example, a 1200px picture will spill over the edge of a small phone screen.

This can be fixed if you use class: .img-fluid

What it does: It sets the image’s max-width: 100% and height: auto.
Simple Words: That‘s about it, and says to the image, Be sure not to ever get wider than your box do, can scale down if the window is small.

HTML

<img src="mountain.jpg" class="img-fluid" alt="Responsive image">

2. Shaping Your Images

Bootstrap provides three main classes to change the “look” of your photo’s edges:

Class	What it looks like	Simple Explanation
`.rounded`	[Square with soft corners]	Just rounds the sharp tips of the corners.
`.rounded-circle`	[A perfect circle]	Turns a square image into a ball shape.
`.img-thumbnail`	[A framed photo]	Adds a thin gray border and some padding (like a polaroid).

3. Aligning Your Images

Since images are “inline” elements, they can be tricky to move. Bootstrap makes it easy:

To Center an Image: You need to turn it into a “block” and set margins to auto.
- Class: .mx-auto .d-block
To Push Left or Right: Use the “float” classes.
- Classes: .float-start (Left) or .float-end (Right).

4. The `<picture>` Tag (Advanced but Simple)

If you want to show a different image on a phone vs. a laptop (e.g., a tall crop for phones and a wide crop for PCs), Bootstrap supports the HTML5 <picture> element. You simply add the .img-fluid class to the final <img> tag inside it.

5. Summary Checklist

Want it to fit the screen? Use .img-fluid.
Want a border? Use .img-thumbnail.
Want a circle? Use .rounded-circle.
Want it centered? Use .mx-auto .d-block.

Quick Warning: If you use .rounded-circle on a rectangular (long) photo, it will look like an oval, not a circle. For a perfect circle, your original image file must be a square!