Usamos cookies para analizar el tráfico.
Estoy tratando de personalizar la clase 'badge' en Bootstrap 4. Lo que estoy tratando de conseguir es mostrar todos los badge con un borde (algo así como cuando ponen .btn-outline-*). Actualmente estoy tratando de hacer esto sobrescribiendo el mixin que trae Bootstrap en un archivo a parte:
@mixin badge-variant($bg) {
color: $bg;
background-color: transparent;
border: 1px solid $bg;
&[href] {
@include hover-focus {
background-color: $bg;
}
}
}
@import "node_modules/bootstrap/scss/bootstrap";Por qué esto no funciona? y que podría hacer para personalizar el mixin sin editar el archivo original? Gracias
Lo que hiciste está bien, solo que tenés que cambiarlos de lugar. Primero incluís Bootstrap y luego definís el nuevo mixin:
// Esto primero
@import "node_modules/bootstrap/scss/bootstrap";
// Esto después
@mixin badge-variant($bg) {
color: $bg;
background-color: transparent;
border: 1px solid $bg;
&[href] {
@include hover-focus {
background-color: $bg;
}
}
}Saludos
Mil gracias Gordon!!!