CSS personalizado no funcionará con Bootstrap

En primer lugar, me gustaría decir que sé que no soy el más eficiente o limpio en mi HTML.

Mi problema es que el CSS personalizado que escribo no se aplica en absoluto a mi página web. Bootstrap parece funcionar perfectamente bien, pero cuando bash hacer modificaciones o sobrescribir Bootstrap, simplemente no funciona. Sé que mi archivo CSS personalizado está vinculado correctamente porque está en el mismo directorio que bootstrap.css

Enlace:

 Help Menu         

Por ejemplo, puedo cambiar el color de fondo del panel usando el elemento :

 

What Do You Need Help With?

Frequent Problems
Printers
Drivers

Pero no puedo cambiar el color del panel usando CSS externo (el siguiente fragmento de CSS está en custom.css) :

 .lukedbgcolor { background-color: #4286f4; } 
 

What Do You Need Help With?

Frequent Problems
Printers
Drivers

He intentado poner el CSS en la parte inferior de bootstrap.css y también he intentado poner la clase lukedbgcolor primero así:

TODA ayuda / consejo / crítica es bienvenida, ¡Gracias!

Esto se debe a la forma en que funciona CSS, le dará ciertas prioridades a los estilos dependiendo de dónde se encuentren. La razón por la que se define en el HTML (también llamado estilo en línea) funciona porque se le da mayor prioridad. Usar múltiples hojas de estilo puede causar problemas y hay varias soluciones. ¡Puede usar la palabra clave! Importante para darle a un cierto estilo la más alta prioridad. Por lo general, se desalienta porque dificulta que otras personas que usan tu código vean por qué se está cambiando un estilo, pero si eres tú mismo, sigue adelante:

 .lukedbgcolor { background-color: #4286f4 !important; } 

El problema se solucionó temporalmente mediante el CDN de Bootstrap en lugar de alojarlo localmente. Creo que el problema más grande tenía que ver con el almacenamiento en caché, que se puede arreglar con lo siguiente,

Solución de caché cortesía de @mayersdesign

 .panel.lukedbgcolor { background-color: #4286f4; } 

Generalmente en CSS, el selector más específico se tiene en cuenta. Digamos que tienes el siguiente div:

 

con el siguiente CSS:

 .someClass{ background-color:red; } #myId{ background-color:blue; } 

el color de fondo del div será azul porque es más específico.

Es posible que el estilo de bootstrap proporcione un selector más específico que el suyo y, por lo tanto, lo anule.

Intenta agregar una identificación a tu div y ver si hace una diferencia. (dado que los identificadores son únicos, son tan específicos como pueden serlo)

No puedo (todavía) comentar sobre la publicación original. ¿Cómo estás cargando esta página? ¿Ves algún error en la consola del navegador? El consejo anterior de utilizar el navegador devtools y examinar el elemento, ver si la clase está allí, y si se aplica o se reemplaza por otros estilos definidos sería la forma de abordarlo.

También desea tener jquery.js cargado antes de bootstrap.js, porque bootstrap.js depende de que primero se cargue jquery.js. La consola del navegador también te diría esto: ¡es una herramienta muy útil!