Uma imagem quando bem feita e colocada no ponto correta fala por sí mesma. Algumas vezes desejamos dar um efeito na imagem para que fique mais pertinente com o nosso design.

Imagens com cantos arredondados.

A classe .rounded class faz os cantos da imagem ficarem arredondados:

Como utilizar :
   <img src="../imagens/ArcodoTriunfo.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">

Como o browser exibe :

Imagem em um círculo

A classe .rounded-circle formata a imagem em um circulo:

Como utilizar :
   <img src="../imagens/ArcodoTriunfo.jpg" class="rounded-circle" alt="Cinque Terre" width="304" height="236">

Como o browser exibe :

Miniatura de imagens (Thumbnail)

A classe .img-thumbnail cria uma margem branca ao redor da imagem:

Como utilizar :
<img src="../imagens/ArcodoTriunfo.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">

Como o browser exibe :

Alinhando imagens

Utilize a classe float-right e float-left para alinhar a imagem:

Como utilizar :
   <img src="../imagens/paris.jpg" class="float-left" alt="Paris" width="500" height="236">
   <img src="../imagens/paris.jpg" class="float-right" alt="Paris" width="500" height="236">

Como o browser exibe :

Não escquecer de acrescentar style="clear:both" na próxima tag para evitar erros de alinhamento com o float.

Centralizando a Imagem

Adicione a classe .mx-auto (margin:auto) e .d-block (display:block) a imagem:

Como utilizar :
   <img src="../imagens/paris.jpg" class="mx-auto d-block" style="width:50%">

Como o browser exibe :