Overriding bootstrap
why i can't override on bootstrap styles
23 Replies
specificity
Specificity - CSS: Cascading Style Sheets | MDN
Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.
https://specificity.keegan.st/
basically something like
.nav-link:hover {}
has higher specificity than
a:hoverIn some scenarios you would need to use
!important.Or you could look into the documentation like: https://getbootstrap.com/docs/5.2/components/accordion/
Accordion
Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
To edit a variable you could do stuff like:
But most of the time you could get away with just simply editing the class (without the need of understanding SASS).
are you loading your css file after bootstrap?
The order shouldn't matter, right?
the order always matters.
if I have
the background color is going to be blue.
same goes with the site, the first css file comes in, sets the classes up and then the next file comes in it will over write things.
this is one of the major benefits of container queries
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
CSS Container Queries - CSS: Cascading Style Sheets | MDN
When creating a responsive design you often use a media query to change the document layout based on the size of the viewport.
They're talking about the CDN 😅
?
oh and I would consider using revert over !important
I usually set out a file that is overwriting bootstrap and for those specific overwrites I revert the attribute
then when I need to set it in other files it isnt a problem
Bootstrap link reference that goes in the
<head>:
yes, that is a css stylesheet
Does the order matter in that case?
Over your stylesheet.
yes.
if you have the same specificity level for changing something, then the order that the css is painted on the DOM matters
So, in the
<head>, should always get our stylesheet after Bootstrap?yuup. HTML is read from top to bottom
Alright, thanks 
but am hoping that either:
1) Bootstrap dies a horrible death
or
2) container queries come in and fix the specificity issues
You always link to bootstrap first then yours css file
oh, you're trying to override color on your
a tag
but you have the class text-dark
stuff like that has !important in it so it takes preference
so you could use !important to override it
I don't think revert works in this casefor links link-dark should be used
Yer, unless you have a very specific selector adding revert won't work.
This is why I chuck these into a override-bs.scss usually