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 miniatura 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 :
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 :