2

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.

JShoe
  • 3,186
  • 9
  • 38
  • 61

1 Answers1

1

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.

  • My apologies for not being clear, I'm not using any code from that first snipped *because* I thought I couldn't since I wasn't using SCSS. So all I have is a CSS file. So you're saying I should change that CSS file to an SCSS file, put all those imports in the first 3 lines, and then I can make that `$theme-colors` declaration before the rest of my "plain" CSS? – JShoe Sep 27 '22 at 02:38
  • Okay I understand this a bit more, bootstrap is built in such a way that the snippet you describe is correct, but just for changing built-in SASS variables. The reason a whole bootstrap color override would work in the first place is because you are overriding it's sass variables... It is built in sass. So the only easy way to do it is to convert your css file to a .scss file. Once you do that , you can use that snippet you posted. You can continue to code in the CSS you are used to afterwards, and you can override classes as I have described. –  Sep 27 '22 at 03:07
  • One more thing, the .scss file has to be fed into a compiling program to convert everything back to .css for your application to work properly, the best practice is to use the SASS npm script but for beginners there are VSCODE extensions that will handle it for you... look at `https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass` –  Sep 27 '22 at 03:09