0

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?

2
  • Compartí un poco el código de lo que fuiste haciendo, no se te puede ayudar así.
    – Kleith
    el 22 abr. 2018 a las 20:49
  • No deberías tocar nunca las clases del framework a menos que sea absolutamente imprescindible o tengas clarísimo que tu cambio es tan definitivo como aplicable en cualquier supuesto de tu site. En mi opinión sería mejor que creases una clase propia en tu css y la aplicases allí donde hiciera falta por si en el futuro bien, quisieras dar marcha atrás o bien aplicar otro estilo a este mismo elemento y que convivan ambos. Por ejemplo para acciones A esa flecha será verde, para acciones B será roja.
    – JorgeGuz
    el 21 feb. 2020 a las 12:30

3 respuestas 3

0

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
 }
0

Utilice este CSS cambiando el color del borde derecho del elemento Pseudo:

.popover.right .arrow:after {
  border-right-color: red;
}

introducir la descripción de la imagen aquí

Mira a quí un Demo para que veas el funcionamiento del mismo.


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;
}
0

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.