Loading...

Custom bootstrap.min.css

bootScore uses the compiled bootstrap.min.css. Source files are not included in the theme.

There are four ways to customize this.

  1. Download the Bootstrap 5 Sass Template for VSCode in the shop and create/compile your own with Sass
  2. Wait until a generator like bootstrap.build is ready for Bootstrap 5
  3. Override via CSS
  4. Unminify bootstrap.min.css and edit directly

Bootstrap 5 Sass Template for VSCode

Usage

  1. Download file and unzip
  2. Download and install Visual Studio Code Editor
  3. Install Live Sass Compiler Extension
  4. Open Visual Studio Code and open file folder
  5. Open index.html in browser
  6. Edit variables in folder /dist/css/bootstrap.scss. More available variables can be found in folder /scss/_variables.scss
  7. Save file
  8. Klick “Watch Sass” in the blue banner in VSCode window
  9. Refresh index.html and enjoy your new Bootstrap

Usage in bootscore-child

  1. Copy your generated bootstrap.min.css, bootstrap.min.css.map (optional), bootstrap.scss (optional, in case you want to edit later, store a copy of it) in folder /css/lib/ in child theme.
  2. Deactivate the bootScore’s bootstrap.min.css and register your own in child theme. Insert following snippet in child-theme’s functions.php:
// Overide bootstrap.min.css in child-theme
function bootscore_replace_bootstrap() {

    // Dequeue parent-theme bootstrap.min.css
    wp_dequeue_style( 'bootstrap' );
    wp_deregister_style( 'bootstrap' );

    // Enqueue new bootstrap.min.css in child-theme
    wp_enqueue_style( 'child-theme-bootstrap', get_stylesheet_directory_uri() .'/css/lib/bootstrap.min.css' , array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'bootscore_replace_bootstrap', 20 );

Now the child-theme’s bootstrap.min.css is used.

5 Comments on “Custom bootstrap.min.css”

  • Trishah Woolley

    says:

    I really love the look of the main page scrollbar of this sidebar: https://bootswatch.com/darkly/ I would love to adapt it (changed the colors) for a site on which I’m using your theme. I have looked at all the code provided for Darkly and I just can’t figure out how they are getting the colors to change. I’m at a loss. Can you point me to anything that will help me achieve this? And maybe this is another “plugin” you could add to what you sell? I bet it would be popular. 🙂

    Thank you for any direction you can offer.

    • Basti

      says:

      Hello Trishah,

      this is pretty easy. Colors are done by Bootstrap color classes in .php files and bootstrap.min.css.

      First let’s assign classes:

      1. Open header.php in child-theme and change in line 41 navbar-light bg-light classes to navbar-dark bg-primary
      2. Change in line 80 bg-light text-primary to bg-primary text-light
      3. Add in line 83 to offcanvas-body class bg-primary
      4. Change toggler color in line 76 by changing text-secondary to text-light

      Your navbar is blue now, mobile-menu as well.

      Let’s do the colors:

      1. Download the Darkly bootstrap.min.css from bootswatch.com and paste it in child-theme folder css/lib/
      2. Copy the code in the article above and paste it in child-theme’s functions.php

      Your site is now using the Darkly theme.

      However, you can edit/create your own Bootstrap by using the Sass template. https://bootscore.me/shop/products/tools/bootstrap-5-sass-template-for-vscode/. You can download _variables.scss from bootswatch.com and replace the variables in bootstrap.scss in folder dist/css/.

      Does that help?

  • Lo Rednib

    says:

    Hi Basti,
    First thanks for all your work it’s awesome ! 🙏

    I just start coding and I’m not experimented.
    I would like to use scss cause I found it more useful than css.
    How can I use your “Bootstrap 5 Sass Template for VSCode” in bootscore-child ?
    Do I have to copy all the bootstrap-5-sass-template-for-vscode folder into the bootscore-5-child folder ?
    I’ve already inserted the snippet in child-theme’s functions.php.

    Thank you for any help you can give me

    • Basti

      says:

      Hi Lo,

      theme does not support scss. It uses the final compiled min.css. Idea behind is that you can create your own Bootstrap and copy them to the theme.

      You can try to copy the folder to your child. In this case you must set correct path to bootstrap.min.css in snippet above or change folders and edit settings.json in compiler template. This should work on a local machine.

      But you must update Bootstrap files always by yourself to latest version when you do this.

      Does that help?

      • Lo Rednib

        says:

        Thanks Basti,
        It helps a lot !

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information