1

I have just downloaded the SASS source files from getbootstrap.com, and installed the compiler Koala.

As far as I understood, the way to do it is to

  1. create your own sass-file.
  2. include the overrides in the beginning of the file.
  3. import the 'bootstrap.scss in the end of the file.
  4. compile your css file and replace the standard cdn with this css file.

In reality, this works, but when I try to create a navbar using my own style, I realize that it is not enough with just creating a theme. One example is that the navbar text color is shown in a strange color that doesnt fit the theme at all. So what do I need to do more? Below is my custom scss.

// Custom.scss

// Make overrides and customizations
$myown: #0066CC !default;
$theme-colors: ("myown": #0066CC);

// Include all of Bootstrap
@import "bootstrap.scss";
Henrik Bengtsson
  • 344
  • 4
  • 17
  • Yes, a bit blurry described, but I am speaking about the text color that is used to create the navbar. When you create your own theme and set that using the tag "" – Henrik Bengtsson Sep 14 '20 at 12:38
  • Hi Zim! That did the trick. To be honest, I havent realized the affect of navbar-dark vs navbar light. If you set the navbar to dark, it makes the text light and vise verca. How do I mark your final comment as answer? – Henrik Bengtsson Sep 14 '20 at 14:17

1 Answers1

1

Only navbar-light and navbar-dark effect the text color of the navbar. Using navbar-dark should work fine: http://codeply.com/p/UAWVfUy3VX -- since the blue is darker.

SASS

$myown: #0066CC;
$theme-colors: ("myown": #0166CC);

@import "bootstrap";

HTML

<nav class="navbar navbar-expand-md navbar-dark bg-myown">...</nav>

Also see: Customizing Bootstrap CSS template

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624