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

## Image réactive
Les images réactives sont essentielles. La classe `img-fluid` de Bootstrap simplifie cette tâche. Appliquez-la à n'importe quel élément `<img>`, et l'image s'ajustera à la taille de la fenêtre d'affichage, garantissant un redimensionnement optimal et une mise en page cohérente sur tous les appareils et tailles d'écran.

## Vignettes d'image
Les vignettes d'image apportent une touche soignée et élégante à l'apparence de votre page web. La classe `img-thumbnail` de Bootstrap offre des coins arrondis et des bordures discrètes pour un rendu propre et uniforme.

## Formes d'image
Pourquoi se contenter d'images rectangulaires classiques alors qu'il est possible d'ajouter du caractère ? Bootstrap propose des classes pour modifier la forme des images, notamment :
- `rounded` : Adoucit les bords avec des coins arrondis pour un effet subtil ;
- `rounded-circle` : Crée des images parfaitement circulaires ;
- `rounded-pill` : Apporte une apparence moderne et épurée avec des images en forme de pilule.



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

Explorez les principes fondamentaux du framework CSS Bootstrap et découvrez les secrets pour concevoir rapidement et efficacement des sites web réactifs et visuellement attrayants. Grâce à une exploration pratique des principales utilitaires et à la mise en œuvre de composants puissants, vous acquerrez une expérience pratique précieuse pour optimiser votre flux de travail de développement web à l'aide de la boîte à outils polyvalente de Bootstrap.

Explorez l'essence de Bootstrap et son évolution depuis sa création jusqu'à aujourd'hui, évaluez ses avantages et inconvénients, et comprenez les prérequis pour une mise en œuvre efficace.

Explorer les options d'installation de Bootstrap. Choisir entre une intégration rapide via le Content Delivery Network (CDN) ou une approche plus personnalisée avec le Node Package Manager (NPM).

Acquisition de compétences dans les éléments clés de Bootstrap, y compris le système de grille polyvalent, la typographie nuancée, l'utilisation dynamique des boutons, la gestion précise des marges et des espacements, ainsi que la création de formulaires efficaces pour une interaction utilisateur fluide.

Améliorez vos compétences Bootstrap avec des sujets avancés couvrant les menus de navigation dynamiques, la gestion réactive des images, les mises en page polyvalentes de cartes, les modales interactives et les carrousels attrayants pour des expériences utilisateur captivantes.

Créez un site portfolio en utilisant le framework Bootstrap avec notre accompagnement. Exploitez les fonctionnalités puissantes de Bootstrap. Cette section pratique vous aidera à présenter vos compétences, projets et réalisations.

Gestion des Images dans Bootstrap

Image réactive

Vignettes d'image

Formes d'image

Awesome!

Gestion des Images dans Bootstrap

Image réactive

Vignettes d'image

Formes d'image