VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-images/

⇱ Bootstrap 5 Images - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 Images

Last Updated : 29 Jul, 2024

Bootstrap 5 provides classes for responsive images, ensuring they scale appropriately within their parent elements, maintaining aspect ratio, and enhancing appearance across devices without overflowing.

Types of Images:

TermDescription
Responsive imagesResize images according to parent element and screen sizes, maintaining aspect ratio.
Image thumbnailsAdd a 1px rounded border around the image. Represents a smaller version of a larger image.
Aligning imagesSet alignment of images using float or text alignment classes. .mx-auto can center block-level images.
Picture<picture> element specifying multiple <source> elements for a specific <img>.

Example 1: In this example, we will create a responsive image.

Output:

👁 Screenshot-2024-07-29-at-10-57-33-42mjjxgwq---HTML---OneCompiler

Example 2: In this example, we will create a thumbnail image.

Output:

👁 Image
Comment

Explore