Como faço para fazer uma imagem arredondada no bootstrap 5?
Bootstrap 5, a versão mais recente, fornece muitos recursos avançados para projetar sites responsivos. As imagens são os componentes populares para adicionar apelo visual aos aplicativos. No Bootstrap 5, várias classes podem ser usadas para fornecer formas diferentes para imagens. Mais especificamente, você pode arredondar a borda desejada da imagem usando classes específicas de bootstrap como “arredondado","de extremidade arredondada", e muitos mais.
Este artigo descreverá como fazer a imagem arredondada no bootstrap 5.
Como criar uma imagem arredondada no bootstrap 5?
Bootstrap 5 oferece muitas aulas que ajudam a fazer as bordas do elemento. Estes estão listados abaixo:
-
- ““arredondado”: Esta classe faz a imagem inteira ao redor.
- ““pilhagem arredondada”: Esta classe fornece a forma de pílula redonda ao elemento.
- ““círculo arredondado”: Esta imagem é arredondada em um círculo.
- ““TOP arredondado”: Esta aula arredonda a imagem do topo.
- ““start-start”: Esta aula arredonda a imagem desde o início.
- ““de extremidade arredondada”: Esta aula conta a imagem do final.
- ““fundo arredondado”: Esta aula arredonda a imagem de baixo.
Agora, vamos praticamente discutir o efeito do bootstrap alistado.
Exemplo 1: Como criar uma rodada de imagem no bootstrap 5?
O "círculo arredondado”A classe é utilizada para criar a imagem em forma de círculo. Para fazer isso, adicione o “”Tag e atribua uma classe“círculo arredondado”No seu arquivo html:
Saída
Exemplo 2: Como fazer uma pílula redonda de imagem no bootstrap 5?
O "pilhagem arredondada”A classe é especificada com a imagem para dar uma forma de pílula redonda a ela.
Para esse fim, implemente a classe “pilhagem arredondada”Conforme mencionado no código abaixo:
Saída
É assim que você pode fazer as imagens redondo no bootstrap 5.
Conclusão
Para fazer imagens redondas no bootstrap 5, várias classes podem ser utilizadas. Essas classes incluem o “de extremidade arredondada","start-start","TOP arredondado","fundo arredondado", e muitos mais. Especificamente, para tornar a imagem inteira uma forma circular, o “círculo arredondado”A classe é usada. Para fazer com que seja uma forma de pílula arredondada, o “pilhagem arredondada”A classe é utilizada. Este artigo explicou como fazer uma imagem arredondada no bootstrap 5.