Badges
Bootstrap 5 Badges component
Insignias responsivas creadas con la última versión de Bootstrap 5. Las insignias agregan información adicional, como recuento o etiqueta, a cualquier contenido. Utilice contadores, iconos o etiquetas.
Ejemplo Basico
Utilice la clase .badge para proporcionar a sus visitantes elementos resaltados, nuevos o no leídos agregándolos a enlaces, navegación de texto y más.
Example heading New
<!-- Ejemplo 1 -->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<button type="button" class="btn btn-primary">Button</button>
</div>
</card>
Sizes
Las insignias se escalan para coincidir con el tamaño del elemento principal inmediato mediante el uso de tamaños de fuente relativos y unidades em. A partir de la versión 5, las insignias ya no tienen estilos de enfoque o desplazamiento para los enlaces.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<!-- Ejemplo 1 -->
<div class="card text-center">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<div class="card-footer text-muted">2 days Dic</div>
</div>
Button
Las insignias se pueden utilizar como parte de enlaces o botones para proporcionar un contador.
<!-- Ejemplo 1 -->
<div class="card card-body">
<div class="row justify-content-center align-items-center">
<div class="col-sm-auto col-4">
<div class="avatar avatar-xl position-relative">
<div src="../../contacta@1.0/dist/img/favicon.png" alt="Contacta" class="w-100 rounded-circle shadow-sm"/>
</div>
</div>
<div class="col-sm-auto col-8 my-auto">
<div class="h-100">
<h5 class="mb-1 font-weight-bolder">Contacta</h5>
<p class="mb-0 font-weight-normal text-sm">CEO / Co-Fundador / Cliente</p>
</div>
</div>
<div class="col-sm-auto ms-sm-auto mt-sm-0 mt-3 d-flex">
<label class="form-check-label mb-0">
<small id="#">
Mantener Actividad
</small>
</label>
<div class="form-check form-switch ms-2 my-auto">
<input class="form-check-input" type="checkbox" checked="">
</div>
</div>
</div>
</div>
Colors
Utilice nuestras clases de colores de insignias para cambiar rápidamente la apariencia de una insignia.
<!-- Ejemplo 1 -->
<h5 class="mb-1 font-weight-bolder">Contacta</h5>
hyperlink
Los hipervinculos cuentan con un focus integrado en dark/mode.
<!-- Ejemplo 1 -->
<h5 class="mb-1 font-weight-bolder">Contacta</h5>
Pills
Usa la clase
.rounded-pill para hacer que las insignias sean mas redondeadas con un border-radius mas grande
<!-- Ejemplo 1 -->
<h5 class="mb-1 font-weight-bolder">Contacta</h5>
Icon inside
Se puede usar iconos dentro de
.badge que los iconos puedes verlos en el apartado de iconos de Font Awesome
<!-- Ejemplo 1 -->
<h5 class="mb-1 font-weight-bolder">Contacta</h5>