Summary  
This chapter explains how to apply Bootstrap’s predefined CSS utility classes (e.g., img-fluid, img-thumbnail, rounded, rounded-circle, rounded-pill) to images for responsive scaling, consistent styling, and custom shapes.  

General domain of usage  
Front-end web development

## Responsive image
Responsive images are crucial. Bootstrap's `img-fluid` class makes it easy. Apply it to any `<img>` element, and it will adjust to the viewport size, ensuring perfect scaling and consistent layouts across all devices and screen sizes.

## Image thumbnails
Thumbnail images add a polished and elegant touch to your webpage's appearance. Bootstrap's `img-thumbnail` class provides rounded corners and subtle borders to ensure a clean and uniform look.

## Image shapes
Why settle for boring rectangular images when you can add a dash of personality? Bootstrap offers classes for shaping images, including:
- `rounded`: Soften the edges with rounded corners for a gentle touch;
- `rounded-circle`: Embrace the circle of life with perfectly rounded images;
- `rounded-pill`: Take things up a notch with pill-shaped images for a sleek and modern look.



PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+SW1hZ2VzIEV4YW1wbGUgMTwvdGl0bGU+CiAgICA8bGluawogICAgICBocmVmPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjMuMi9kaXN0L2Nzcy9ib290c3RyYXAubWluLmNzcyIKICAgICAgcmVsPSJzdHlsZXNoZWV0IgogICAgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8IS0tIFJlc3BvbnNpdmUgSW1hZ2UgLS0+CiAgICA8aW1nCiAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy80MzMzYWIxZi0wYTcyLTQzMWMtYjlkMC03M2E3NTkyNzM5ZDQvc2VjdGlvbi00L2V4YW1wbGUtaW1hZ2UucG5nIgogICAgICBjbGFzcz0iaW1nLWZsdWlkIgogICAgICBhbHQ9IlJlc3BvbnNpdmUgSW1hZ2UiCiAgICAvPgoKICAgIDwhLS0gVGh1bWJuYWlsIEltYWdlIC0tPgogICAgPGltZwogICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvNDMzM2FiMWYtMGE3Mi00MzFjLWI5ZDAtNzNhNzU5MjczOWQ0L3NlY3Rpb24tNC9leGFtcGxlLWltYWdlLnBuZyIKICAgICAgY2xhc3M9ImltZy10aHVtYm5haWwiCiAgICAgIGFsdD0iVGh1bWJuYWlsIEltYWdlIgogICAgLz4KCiAgICA8IS0tIENpcmN1bGFyIEltYWdlIC0tPgogICAgPGltZwogICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvNDMzM2FiMWYtMGE3Mi00MzFjLWI5ZDAtNzNhNzU5MjczOWQ0L3NlY3Rpb24tNC9leGFtcGxlLWltYWdlLnBuZyIKICAgICAgY2xhc3M9InJvdW5kZWQtY2lyY2xlIgogICAgICBhbHQ9IkNpcmN1bGFyIEltYWdlIgogICAgLz4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjMuMi9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Explore core principles of the Bootstrap CSS framework and unlock the secrets to crafting responsive and visually stunning websites quickly and efficiently. Through hands-on exploration of the key utilities and implementation of powerful components, you'll gain invaluable practical experience to streamline your web development workflow using Bootstrap's versatile toolkit.

Delve into the essence of Bootstrap and its journey from inception to the present, weigh its benefits and drawbacks, and understand prerequisites for effective implementation.

Navigate through Bootstrap installation options. Choose between swift integration via Content Delivery Network (CDN) or a more customized Node Package Manager (NPM) approach.

Gain proficiency in key Bootstrap elements, including the versatile grid system, nuanced typography, dynamic button usage, precise management of margins and paddings, and crafting effective forms for seamless user interaction.

Elevate your Bootstrap skills with advanced topics covering dynamic navigation menus, responsive image handling, versatile card layouts, interactive modals, and engaging carousels for captivating user experiences.

Create a portfolio website using the Bootstrap framework with our guidance. Utilize the powerful features of Bootstrap. This hands-on section will help showcase your skills, projects, and achievements.

Handling Images in Bootstrap

Responsive image

Image thumbnails

Image shapes

Awesome!

Handling Images in Bootstrap

Responsive image

Image thumbnails

Image shapes