Las insignias en un sitio web se utilizan para entregar información importante al usuario, como una advertencia, recuento de notificaciones, promoción de un determinado programa, etc. Bootstrap 5 proporciona una determinada clase que le permite crear insignias en su sitio web. Además de su creación, otras clases también están disponibles para diseñar las insignias. Este blog te guía sobre cómo crear y diseñar insignias usando Bootstrap 5.

Cómo crear una insignia

Con el fin de crear una insignia, use el .clase de insignia junto con una clase de color de fondo que son .BG-Primary, .bisco, .BG-SECUDARY, .BG-Info, .BG-WARNING, .BG-Danger, .BG-Light, .BG-Dark.

Html

Haga clic aquí Importante

Haga clic aquí Importante

Para crear una insignia, el elemento se usa dentro de un

y

elemento. Al elemento se le ha asignado el .clase de insignia junto con una clase de color de fondo, .BG-Warning para darle a la insignia un fondo amarillo. Tenga en cuenta que una insignia por defecto tiene una forma rectangular y se escala hacia arriba y hacia abajo para que coincida con el tamaño del elemento principal, si hay alguna.

Producción

Las insignias en la salida anterior se utilizan para captar la atención de los usuarios.

Cómo dar un color de fondo a las insignias

Las insignias se pueden proporcionar un color de fondo utilizando cualquiera de las clases de color de fondo. Estas clases juegan un papel importante en la transmisión del significado de una insignia.

Html

Insignia
Insignia
Insignia
Insignia

Aquí hemos creado cuatro insignias y a cada una de ellas se les ha asignado una clase de color de fondo diferente.

Producción

Cada insignia transmite un significado diferente.

Cómo crear insignias redondeadas

Como ya se mencionó, las insignias por defecto tienen una forma rectangular, sin embargo, si desea darles una forma redondeada, use el .píldora redondeada clase.

Html

Insignia
Insignia
Insignia
Insignia

El código anterior generará cuatro insignias en forma de píldora con un color de fondo diferente.

Producción

Las insignias recibieron una forma redondeada con éxito.

Cómo crear insignias de mostrador

Las insignias de mostrador se pueden usar para mostrar el recuento de notificaciones de cierto elemento. Con el propósito de hacer tales insignias, debe anidar el elemento dentro de ese elemento particular.

Html

Llamadas perdidas 8

Aquí hemos creado un botón de "llamadas perdidas" que tiene un determinado estilo y luego anidamos un elemento que también tiene un cierto estilo y muestra la cantidad de llamadas perdidas, mostrando así el recuento de notificaciones para las llamadas perdidas.

Producción

La salida anterior muestra que hay un total de 8 llamadas perdidas.

Conclusión

Con el fin de crear y diseñar insignias utilizando bootstrap 5 use el .insignia clase junto con una de las clases de color de fondo que son .BG-Primary, .bisco, .BG-SECUDARY, .BG-Info, .BG-WARNING, .BG-Danger, .BG-Light, .BG-Dark para darles un color de fondo. Además, una insignia por defecto tiene una forma rectangular, sin embargo, a estos se les puede dar una forma redondeada utilizando el .píldora redondeada clase. Además, haces una insignia de contador de notificación anidando la insignia dentro de un elemento.