cssbootstrap-4sasskoala

Create your own theme in Bootstrap 4.5

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";
Solution

  • 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