Bootstrap 5.3 Figure Patterns

Basic Figure with Caption

400x300
A caption for the above image.

Right-aligned Caption

400x300
A right-aligned caption.

Center-aligned Caption

400x300
A centered caption.

Figure with Different Rounded Styles

.rounded
Rounded corners
.rounded-3
Larger rounded corners
.rounded-0
No rounded corners

Figure in Card Context

Card Image
Image Title
This figure is used inside a card component, with the caption serving as the card body.

Multiple Figures in Grid

Image 1
First image caption
Image 2
Second image caption
Image 3
Third image caption
Image 4
Fourth image caption

Figure with Detailed Caption

600x400
Figure 1: This is a more detailed caption that might include additional context about the image. It can span multiple sentences and provide useful information to the viewer. Learn more about this topic.

Figures with Thumbnail Style

Thumbnail 1
Thumbnail style image
Thumbnail 2
Another thumbnail image
Thumbnail 3
Third thumbnail image

Figure with Shadow Effects

.shadow-sm
Small shadow
.shadow
Regular shadow
.shadow-lg
Large shadow