| Class Name | Use (Purpose) | Example / Effect |
|---|---|---|
| figure | Basic Bootstrap styling for the figure container. | Wraps image and caption together as a single group. |
| figure-img | Styling and spacing for image inside a figure. | Adds proper margin and layout inside the figure. |
| img-fluid | Makes the image responsive. | Image resizes automatically according to screen size. |
| rounded | Makes image corners slightly rounded. | Gives a soft, smooth corner look. |
| rounded-circle | Makes the image circular. | Useful for profile pictures or circular icons. |
| rounded-pill | Makes the image a pill shape (horizontal oval). | Good for badges or horizontal oval images. |
| figure-caption | Styling for the caption text. | Caption appears below the image, smaller font. |
| text-start | Aligns the caption text to the left. | Caption appears left-aligned below the image. |
| text-center | Aligns the caption text to the center. | Caption appears centered below the image. |
| text-end | Aligns the caption text to the right. | Caption appears right-aligned below the image. |
| shadow | Adds shadow effect to image or figure container. | Creates soft shadow around the image or figure. |
| border | Adds a border around the image or figure container. | Draws a line border around the image. |
| p-* / m-* | Adjusts padding (p-*) or margin (m-*) of figure/image. | Example: p-2 = 0.5rem padding, m-3 = 1rem margin. |
| Class | Effect | Radius (rem) | Approx px |
|---|---|---|---|
| rounded-0 | No rounding | 0 | 0 px |
| rounded-1 | Very small rounding | 0.2 rem | 3.2 px |
| rounded-2 | Small rounding | 0.25 rem | 4 px |
| rounded-3 | Medium rounding | 0.3 rem | 4.8 px |
| rounded | Default rounding | 0.25 rem | 4 px |
| rounded-pill | Pill shape (horizontal oval) | Full horizontal rounding | Depends on width/height |
| rounded-circle | Full circle (image must be square) | 50% | 50% of width/height |
No shadow
Small shadow
Medium shadow
Large shadow