Modify a bootstrap variable

Im just starting out with using Visual Studio to create a website. I’ve selected the .net core MVC template and uses bootstrap . Just figuring this out as I go. I want to modify some of the layout and colours that the template uses - rather than start from scratch because it gives me a starting point to work from.

i did some reading on how to modify the bootstrap formatting and it is advised not to modify it directly but use a custom.scss file to modify variables that the bootstrap uses. I want to try stick to best practices so I am trying to make this work but I just cant get it to work. Can anyone else advise what I am doing wrong?

Using a guide I found online, I have created CustomBoot.scss with the following contents:

/* custom.scss */

/* import the necessary Bootstrap files */
@import "bootstrap/variables";

/* -------begin customization-------- */

/* simply assign the value */

/* or, use an existing variable */
$primary: #005190;

/* -------end customization-------- */

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

I am using the following lines to reference the stylesheets:

<link rel="stylesheet" href="~/lib/bootstrap/CustomBoot.scss" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />

Basically I am trying to modify the variable primary (which I believe/hope should change bg-primary).

It doesnt work unfortunately , hoping someone could point me in the right direction?


1 Like

Okey, your “CustomBoot.scss” should be called after “bootstrap.min.css” in order to override the styles, the later is called the higher specificity it has, that is a higher priority. Let’s see if that fixes it… Try also replacing " ~" by a dot in the href atribute of the linked stylesheets