¿Cómo puedo anular los estilos CSS de Bootstrap?

Necesito modificar bootstrap.css para que se ajuste a mi sitio web. Siento que es mejor crear un archivo custom.css separado en lugar de modificar bootstrap.css directamente, una de las razones es que bootstrap.css debe obtener una actualización, sufriré intentando volver a incluir todas mis modificaciones. Voy a sacrificar algo de tiempo de carga para estos estilos, pero es insignificante para los pocos estilos que anulo.

¿Debo anular bootstrap.css para eliminar el estilo de un ancla / clase? Por ejemplo, si deseo eliminar todas las reglas de diseño de la legend :

 legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; color: #333333; border: 0; border-bottom: 1px solid #e5e5e5; } 

Puedo simplemente eliminar todo eso en bootstrap.css , pero si mi entendimiento sobre las mejores prácticas sobre la anulación de CSS es correcto, ¿qué debo hacer en su lugar?

Para que quede claro, quiero eliminar todos esos estilos de leyenda y usar los valores CSS de los padres. Entonces, combinando la respuesta de Pranav, ¿haré lo siguiente?

 legend { display: inherit !important; width: inherit !important; padding: inherit !important; margin-bottom: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; border: inherit !important; border-bottom: inherit !important; } 

(Esperaba que haya una manera de hacer algo como lo siguiente 🙂

 legend { clear: all; } 

Usar !important no es una buena opción, ya que es muy probable que desee anular sus propios estilos en el futuro. Eso nos deja con las prioridades de CSS.

Básicamente, cada selector tiene su propio ‘peso’ numérico:

  • 100 puntos para ID
  • 10 puntos para clases y pseudo-clases
  • 1 punto para selectores de tags y pseudo-elementos

Entre dos estilos de selector, el navegador siempre elegirá el que tenga más peso. El orden de las hojas de estilo solo importa cuando las prioridades son uniformes; por eso no es fácil anular Bootstrap.

Su opción es inspeccionar las fonts de Bootstrap, averiguar cómo se define exactamente un estilo específico y copiar ese selector para que su elemento tenga la misma prioridad. Pero en cierto modo, perdemos toda la dulzura de Bootstrap en el proceso.

La manera más fácil de superar esto es asignar ID arbitraria adicional a uno de los elementos raíz de su página, como este:

De esta manera, puede simplemente ponerle un prefijo a cualquier selector de CSS con su ID, agregar instantáneamente 100 puntos de peso al elemento y anular las definiciones de Bootstrap:

 /* Example selector defined in Bootstrap */ .jumbotron h1 { /* 10+1=11 priority scores */ line-height: 1; color: inherit; } /* Your initial take at styling */ h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */ line-height: 1; color: inherit; } /* New way of prioritization */ #bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */ line-height: 1; color: inherit; } 

En la sección principal de su html coloque su custom.css debajo de bootstrap.css.

   

Luego, en custom.css tienes que usar exactamente el mismo selector para el elemento que deseas sobrescribir. En el caso de la legend , solo se mantiene como legend en su custom.css porque bootstrap no tiene ningún selector más específico.

 legend { display: inline; width: auto; padding: 0; margin: 0; font-size: medium; line-height: normal; color: #000000; border: 0; border-bottom: none; } 

Pero en el caso de h1 por ejemplo, tienes que ocuparte de selectores más específicos como .jumbotron h1 porque

 h1 { line-height: 2; color: #f00; } 

no anulará

 .jumbotron h1, .jumbotron .h1 { line-height: 1; color: inherit; } 

Aquí hay una explicación útil de la especificidad de los selectores de CSS que debe comprender para saber exactamente qué reglas de estilo se aplicarán a un elemento. http://css-tricks.com/specifics-on-css-specificity/

Todo lo demás es solo una cuestión de copiar / pegar y editar estilos.

No debería afectar mucho el tiempo de carga, ya que está anulando partes de la hoja de estilo base.

Estas son algunas de las mejores prácticas que personalmente sigo:

  1. Siempre cargue CSS personalizado después del archivo CSS base (no receptivo).
  2. Evite usar !important si es posible. Eso puede anular algunos estilos importantes de los archivos CSS básicos.
  3. Siempre cargue bootstrap-responsive.css después de custom.css si no desea perder consultas de medios. – DEBE SEGUIR
  4. Prefiere modificar las propiedades requeridas (no todas).

Enlace su archivo custom.css como la última entrada debajo de bootstrap.css. Las definiciones de estilo Custom.css anularán bootstrap.css

Html

   

Copie todas las definiciones de estilo de la leyenda en custom.css y realice cambios en ella (como margin-bottom: 5px; – Esto sobreescribirá margin-bottom: 20px;)

Si está planeando hacer cambios bastante grandes, puede ser una buena idea hacer que se arranquen directamente y lo reconstruyan. Entonces podrías reducir la cantidad de datos cargados. Consulte Bootstrap en GitHub para obtener la guía de comstackción.

Un poco tarde, pero lo que hice fue agregar una clase al div raíz, luego extendí todos los elementos del bootstrap en mi hoja de estilo personalizada:

 .overrides .list-group-item { border-radius: 0px; } .overrides .some-elements-from-bootstrap { /* styles here */ } 
  

Para restablecer los estilos definidos para legend en bootstrap, puede hacer lo siguiente en su archivo css:

 legend { all: unset; } 

Ref: https://css-tricks.com/almanac/properties/a/all/

La propiedad all en CSS restablece todas las propiedades del elemento seleccionado, excepto las propiedades direction y unicode-bidi que controlan la dirección del texto.

Los valores posibles son: initial , inherit y unset .

Nota al margen: la propiedad clear se usa en relación con float ( https://css-tricks.com/almanac/properties/c/clear/ )

Descubrí que (bootrap 4) poner tu onw css detrás de bootstrap.css y .js es la mejor solución.

Encuentre el artículo que desea cambiar (inspeccione el elemento) y use exactamente la misma statement, y luego anulará.

Me tomó un poco de tiempo resolver esto.

Dar ID a la leyenda y aplicar css. Al igual que add id hello to legend () el css es como follw:

 #legend legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; color: #333333; border: 0; border-bottom: 1px solid #e5e5e5; } 

Use jquery css en lugar de css. . . jquery tiene prioridad que bootstrap css …

p.ej

 $(document).ready(function(){ $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"}); ); instead of .mnu { font-family:myfnt; font-size:20px; color:#006699; }