Overriding bootstrap

why i can't override on bootstrap styles
23 Replies
ErickO
ErickO•3y ago
specificity
ErickO
ErickO•3y ago
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.
ErickO
ErickO•3y ago
https://specificity.keegan.st/ basically something like .nav-link:hover {} has higher specificity than a:hover
Myndi
Myndi•3y ago
In some scenarios you would need to use !important.
Myndi
Myndi•3y ago
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.
Myndi
Myndi•3y ago
To edit a variable you could do stuff like:
.accordion {
--bs-accordion-color: white;
}
.accordion {
--bs-accordion-color: white;
}
But most of the time you could get away with just simply editing the class (without the need of understanding SASS).
Mannix
Mannix•3y ago
are you loading your css file after bootstrap?
Myndi
Myndi•3y ago
The order shouldn't matter, right?
Coder_Carl
Coder_Carl•3y ago
the order always matters. if I have
body {
background-color: red;
}
body {
background-color: blue;
}
body {
background-color: red;
}
body {
background-color: blue;
}
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.
Myndi
Myndi•3y ago
They're talking about the CDN 😅
Coder_Carl
Coder_Carl•3y ago
? 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
Myndi
Myndi•3y ago
Bootstrap link reference that goes in the <head>:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
Coder_Carl
Coder_Carl•3y ago
yes, that is a css stylesheet
Myndi
Myndi•3y ago
Does the order matter in that case? Over your stylesheet.
Coder_Carl
Coder_Carl•3y ago
yes. if you have the same specificity level for changing something, then the order that the css is painted on the DOM matters
Myndi
Myndi•3y ago
So, in the <head>, should always get our stylesheet after Bootstrap?
Coder_Carl
Coder_Carl•3y ago
yuup. HTML is read from top to bottom
Myndi
Myndi•3y ago
Alright, thanks thumbsUP
Coder_Carl
Coder_Carl•3y ago
but am hoping that either: 1) Bootstrap dies a horrible death or 2) container queries come in and fix the specificity issues
Mannix
Mannix•3y ago
You always link to bootstrap first then yours css file
ErickO
ErickO•3y ago
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 case
Mannix
Mannix•3y ago
for links link-dark should be used
Coder_Carl
Coder_Carl•3y ago
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
Want results from more Discord servers?
Add your server