Hay manera de editar el CSS de Bootstrap y no usar el <strong>important!</strong>?

Muchas gracias a todos, me sirvió bastante sus respuestas. 👏🏻

Hola, ¿Cómo estás?

Hay que recordar la teoria de CSS y la especificidad y ver como arma las reglas CSS el framework Bootstrap para poder modificarlas.

La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados.

La especificidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada tipo de selector. Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS.

Entonces en tu HTML deberias tener tu styles.css o main.css (depende como lo llames) debajo de la hoja de estilos de Bootstrap. Y cuando quieras sobre escribir los estilos tienes que darle la misma especificidad que usa Bootstrap en su hoja de estilos.

Deberias tener en cuenta de ++USAR IGUAL++ que Bootstrap la especificad, eso puedes usarlo con el inspeccionar elemento y ver como tiene Bootstrap la declaración y copiarla desde ahí.

Un ejemplo:

// Tiene menos especificidad tu forma, por ende aunque esté tu css por debajo de la hoja de estilos de Bootstrap, no tiene la misma especificidad y vale más el otro.

// Bootstrap
nav ul li a {color: red}

// CSS propio
nav a {color: green}

// Entonces sigue haciendo caso y seguro debes recurrir a un:

!important 

En cambio:

// Así seria lo correcto y de esta forma la especificidad es la misma, y CSS le da importancia a la ultima regla aplicada (la tuya, ya que tu hoja de estilos viene luego de la del framework en cuestión).

nav ul li a {color: green}

Te dejo por las dudas, una lectura para que comprendas mejor el concepto de especificidad y no te vuelvas locos con los !important que a la larga además de ser una mala práctica son un dolor de cabezas.

https://developer.mozilla.org/es/docs/Web/CSS/Specificity

Saludos.

Muy buena idea, no se me había ocurrido. Por el tema de especificidad, tener dos clases tendría más peso que una sola. 👏👏

¡Hola!

Claro que si puedes, te explico como. Primero que todo bootstrap ya tiene unas clases las cuales son las que les da todo el estilo pero aveces no son las que queremos y queremos personalizarla.

Supongamos que hay una clase de bootstrap llamada .wrapper_top y tu quieres cambiar justo los estilos de esa clase, lo que debes hacer es ponerle a ese mismo elemento una clase que tu quiera ejemplo:

<div class: "wrapper_top mi_clase">

Y para que en el css apliquen los estilos y predominen los tuyos debes ponerlo de la siguiente forma.

.wrapper_top .mi_clase{
	text-aling: center;
]

Tienes que ponerlas en ese orden primero la clase de bootstrap y luego la tuya

¡Hazme saber si te funciono, saludos!