quiero saber como puedo cambiar el color de las flechas de los popover de bootstrap. Tengo el css de bootstrap linkeado.
Debo modificar el css local o el de bootstrap?
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadquiero saber como puedo cambiar el color de las flechas de los popover de bootstrap. Tengo el css de bootstrap linkeado.
Debo modificar el css local o el de bootstrap?
Es mejor que hagas una modificacion a tu css local, que este por encima de la referencia a bootstrap.
.popover-header{
/// tus cambios en la cabecera del popover
}
.popover-body{
/// tus cambios en el cuerpo del popover
}
popover > .arrow{
/// tus en la flecha del popover
}
Utilice este CSS
cambiando el color del borde derecho del elemento Pseudo:
.popover.right .arrow:after {
border-right-color: red;
}
Otro pequeño ejemplo:
Usando un popover
estándar en Bootstrap 3:
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Este es el mensaje">
Popover on right
</button>
Puede agregar el siguiente css a sus reglas personalizadas:
.popover {
background-color: red; /*sustituye 'rojo' con tu color de elección*/
border-color: red;
}
.popover.right>.arrow:after {
border-right-color: red;
}
.popover-content {
background-color: red;
}
La mejor opción es seleccionar cada caso y modificarlo:
.bs-popover-top > .popover-arrow::after{
border-top-color: #27f !important;
}
.bs-popover-bottom > .popover-arrow::after{
border-bottom-color: #27f !important;
}
.bs-popover-start > .popover-arrow::after{
border-left-color: #27f !important;
}
.bs-popover-end > .popover-arrow::after{
border-right-color: #27f !important;
}
Esta solución solo la he comprobado para Bootstrap 5. Espero que te sirva.