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

## Imagem responsiva
Imagens responsivas são essenciais. A classe `img-fluid` do Bootstrap facilita esse processo. Aplique-a a qualquer elemento `<img>` para que a imagem se ajuste ao tamanho da janela de visualização, garantindo escala perfeita e layouts consistentes em todos os dispositivos e tamanhos de tela.

## Miniaturas de imagem
Miniaturas de imagem proporcionam um toque refinado e elegante à aparência da sua página. A classe `img-thumbnail` do Bootstrap oferece cantos arredondados e bordas sutis para garantir um visual limpo e uniforme.

## Formatos de imagem
Por que se contentar com imagens retangulares comuns quando é possível adicionar personalidade? O Bootstrap oferece classes para diferentes formatos de imagem, incluindo:
- `rounded`: Suaviza as bordas com cantos arredondados para um toque delicado;
- `rounded-circle`: Cria imagens perfeitamente circulares;
- `rounded-pill`: Aplica formato de pílula para um visual moderno e elegante.



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

Explore os princípios fundamentais do framework CSS Bootstrap e descubra os segredos para criar sites responsivos e visualmente impressionantes de forma rápida e eficiente. Por meio da exploração prática das principais utilidades e da implementação de componentes poderosos, você adquirirá experiência prática valiosa para otimizar seu fluxo de trabalho em desenvolvimento web utilizando o versátil conjunto de ferramentas do Bootstrap.

Explore a essência do Bootstrap e sua trajetória desde a criação até o presente, avalie seus benefícios e desvantagens, e compreenda os pré-requisitos para uma implementação eficaz.

Navegue pelas opções de instalação do Bootstrap. Escolha entre integração rápida via Content Delivery Network (CDN) ou uma abordagem mais personalizada utilizando o Node Package Manager (NPM).

Domínio dos principais elementos do Bootstrap, incluindo o versátil sistema de grid, tipografia detalhada, uso dinâmico de botões, gerenciamento preciso de margens e preenchimentos, e criação de formulários eficazes para interação fluida do usuário.

Aprimoramento das habilidades em Bootstrap com tópicos avançados, incluindo menus de navegação dinâmicos, manipulação responsiva de imagens, layouts versáteis de cartões, modais interativos e carrosséis envolventes para experiências de usuário cativantes.

Crie um site de portfólio utilizando o framework Bootstrap com nossa orientação. Aproveite os recursos avançados do Bootstrap. Esta seção prática ajudará a exibir suas habilidades, projetos e conquistas.

Manipulação de Imagens no Bootstrap

Imagem responsiva

Miniaturas de imagem

Formatos de imagem

Awesome!

Manipulação de Imagens no Bootstrap

Imagem responsiva

Miniaturas de imagem

Formatos de imagem