¿Cómo hago una imagen redondeada en Bootstrap 5??

¿Cómo hago una imagen redondeada en Bootstrap 5??

Bootstrap 5, la versión más reciente, proporciona muchas características avanzadas para diseñar sitios web receptivos. Las imágenes son los componentes populares para agregar atractivo visual a las aplicaciones. En Bootstrap 5, se pueden usar varias clases para dar diferentes formas a las imágenes. Más específicamente, puede redondear el borde deseado de la imagen utilizando clases de arranque específicas como "redondeado","de extremo redondeado", y muchos más.

Este artículo describirá cómo hacer la imagen redondeada en Bootstrap 5.

Cómo crear una imagen redondeada en Bootstrap 5?

Bootstrap 5 ofrece muchas clases que ayudan a hacer que los bordes del elemento reduzcan. Estos se enumeran a continuación:

    • "redondeado": Esta clase hace que toda la imagen.
    • "píldora redondeada": Esta clase da la forma de la píldora redonda al elemento.
    • "círculo redondeado": Esta imagen se redondea en un círculo.
    • "redondeado": Esta clase redondea la imagen desde arriba.
    • "de inicio": Esta clase redondea la imagen desde el principio.
    • "de extremo redondeado": Esta clase redondea la imagen desde el final.
    • "fondo redondeado": Esta clase redondea la imagen desde el fondo.

Ahora, discutamos prácticamente el efecto de la bootstrap alistada.

Ejemplo 1: Cómo crear una imagen redonda en Bootstrap 5?

El "círculo redondeadoLa clase se utiliza para crear la imagen en forma de círculo. Para hacerlo, agregue el ""Etiqueta y asigna una clase"círculo redondeado"En su archivo HTML:


Producción


Ejemplo 2: Cómo hacer una imagen redonda en bootstrap 5?

El "píldora redondeadaLa clase se especifica con la imagen para darle una forma de píldora redonda.

Para este propósito, implementa la clase "píldora redondeada"Como se menciona en el siguiente código:


Producción


Así es como puedes hacer que las imágenes redondean en Bootstrap 5.

Conclusión

Para hacer que las imágenes redondean en Bootstrap 5, se pueden utilizar varias clases. Estas clases incluyen el "de extremo redondeado","de inicio","redondeado","fondo redondeado", y muchos más. Específicamente, para que toda la imagen sea una forma circular, la "círculo redondeadoSe usa la clase. Para que sea una forma de píldora redondeada, el "píldora redondeadaSe utiliza la clase. Este artículo ha explicado cómo hacer una imagen redondeada en Bootstrap 5.