I'm working on a coding bootcamp / cohort where I'm making a webapp, and I chose MD Bootstrap for the style framework. This webapp has buttons, and I'm trying to change the primary colors of the app, including the colors of the buttons. I found code that completely overrides the buttons, but that's not what I'm looking for.
I've been searching around for overriding the primary color of bootstrap, but they all refer to SCSS solutions. At this point in the BootCamp, we're only working with HTML, CSS, Javascript, and jQuery, so I don't have any SCSS files.
Are SCSS files something I can make after including the Bootstrap framework?
The code that it seems like I want to use looks like this:
@import "bootstrap/functions";
@import "bootstrap/variables";
$theme-colors: (
primary: $purple
);
/* finally, import Bootstrap */
@import "bootstrap";
But I don't know if I am using a framework that allows me to add this code in without reworking my app structure.
Right now I'm settling for this code:
/* This overrides the color for all states, does not adjust the palette */
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #a6192e !important;
}
But that obviously isn't what I'm trying to do either.
SCSS is a superset of CSS, meaning all CSS is valid in SCSS (you could rename a .css file .scss and it would act the exact same way). So you can solve this with CSS knowledge, don't fret.
Bootstrap is overriding what you write above @import "bootstrap"; because it is including all of the bootstrap css below your written code. The !important property is a bad practice, usually reserved for quick testing.
Move the import bootstrap line to line 3, above your own primary color override.