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

## Imagen responsiva
Las imágenes responsivas son fundamentales. La clase `img-fluid` de Bootstrap lo facilita. Aplícala a cualquier elemento `<img>` y se ajustará al tamaño de la ventana de visualización, garantizando una escala perfecta y diseños consistentes en todos los dispositivos y tamaños de pantalla.

## Miniaturas de imagen
Las imágenes en miniatura aportan un toque pulido y elegante a la apariencia de tu página web. La clase `img-thumbnail` de Bootstrap proporciona bordes redondeados y sutiles para asegurar un aspecto limpio y uniforme.

## Formas de imagen
¿Por qué conformarse con imágenes rectangulares cuando puedes añadir un toque de personalidad? Bootstrap ofrece clases para dar forma a las imágenes, incluyendo:
- `rounded`: Suaviza los bordes con esquinas redondeadas para un toque delicado;
- `rounded-circle`: Consigue imágenes perfectamente redondeadas;
- `rounded-pill`: Da un paso más con imágenes en forma de píldora para un aspecto moderno y elegante.



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

Explora los principios fundamentales del framework CSS Bootstrap y descubre los secretos para crear sitios web responsivos y visualmente atractivos de manera rápida y eficiente. A través de la exploración práctica de las utilidades clave y la implementación de potentes componentes, obtendrás una experiencia práctica invaluable para optimizar tu flujo de trabajo en desarrollo web utilizando el versátil conjunto de herramientas de Bootstrap.

Explora la esencia de Bootstrap y su evolución desde sus inicios hasta la actualidad, analiza sus ventajas y desventajas, y comprende los requisitos previos para una implementación eficaz.

Explora las opciones de instalación de Bootstrap. Selecciona entre una integración rápida mediante Content Delivery Network (CDN) o un enfoque más personalizado con Node Package Manager (NPM).

Adquirir dominio de los elementos clave de Bootstrap, incluido el versátil sistema de cuadrícula, la tipografía detallada, el uso dinámico de botones, la gestión precisa de márgenes y rellenos, y la creación de formularios efectivos para una interacción fluida del usuario.

Mejore sus habilidades en Bootstrap con temas avanzados que abarcan menús de navegación dinámicos, gestión de imágenes responsivas, diseños de tarjetas versátiles, modales interactivos y carruseles atractivos para experiencias de usuario cautivadoras.

Cree un sitio web de portafolio utilizando el framework Bootstrap con nuestra orientación. Aproveche las potentes características de Bootstrap. Esta sección práctica le ayudará a mostrar sus habilidades, proyectos y logros.

Gestión de Imágenes en Bootstrap

Imagen responsiva

Miniaturas de imagen

Formas de imagen

Awesome!

Gestión de Imágenes en Bootstrap

Imagen responsiva

Miniaturas de imagen

Formas de imagen