locked
Modify Bootstrap variable RRS feed

  • Question

  • User-1407020616 posted

    Hi

    Im just starting out with using Visual Studio to create a website.  I've selected the .net core MVC template which 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. </div> <div> </div> <div>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?</div> <div> </div> <div>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) so that the nav bar will display with a different colour.

    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary border-bottom box-shadow mb-3">

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

    Thanks
    Dan

    Thursday, February 18, 2021 4:32 PM

All replies

  • User-474980206 posted

    Browsers do not support Sass files directly. They must first be converted to css. You will need to pick a Sass to css compiler tool. 

    see sass installation instructions

      https://sass-lang.com/install

    The bootstrap team uses the npm sass package

      https://www.npmjs.com/package/sass

    Note: Babel will also support sass, so you can just import sass modules in your JavaScript modules.

    Friday, February 19, 2021 4:00 PM
  • User1535942433 posted

    Hi danhowitt,

    Basically I am trying to modify the variable primary (which I believe/hope should change bg-primary) so that the nav bar will display with a different colour.

    What's meaning of the different colour? Do you need  different divs such as content,navbar,footer have different colours?

    If you need to do this,you could set different class.

    More details,you could refer to below article:

    https://www.codeply.com/go/f5OmhIdre3

    Best regards,

    Yijing Sun

    Monday, February 22, 2021 4:01 AM