Quick Tutorial: How to enable Bootstrap variable overriding with b4st 3.0 + bootswatch

[kLOsk]

Since b4st 3 is out and @SimonPadbury added gulp compilation to it I wanted to share quick instructions on how to add bs4 via npm and enable variable overriding.

First add bootstrap via npm by running: npm install bootstrap

Then add the following to enqueues.php so we use the npm sourced bootstrap js

wp_register_script('bootstrap-js', get_template_directory_uri() . '/node_modules/bootstrap/dist/js/bootstrap.min.js', false, '4.4.1', true);
wp_enqueue_script('bootstrap-js');

and remove the cdn style and js registration:

//wp_register_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, '4.4.1', null);
//wp_enqueue_style('bootstrap4');

//wp_register_script('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', false, '4.4.1', true);
//wp_enqueue_script('bootstrap4');

add to b4st.scss at the top

//These are the variables to overwrite bootstrap styling
@import "b4st/variables";

//Load bootstrap style via npm
@import '../../node_modules/bootstrap/scss/bootstrap';

add the file variables.scss to b4st folder

/* All Bootstrap themeing variables can be added here */

$primary:       #009922;
$enable-shadows:            true;
$enable-gradients:          true;

Now you can run gulp and the default bootstrap variables can be overridden.

Bonus

If you want to use bootswatch themes, that's also easy

Simply run npm install bootswatch Then change the b4st.scss by adding the two bootswatch scss files (make sure to place them around the bootstrap.scss import call)

//we are also adding bootswatch (change [theme] to the theme name)
@import "../../node_modules/dist/[theme]/variables";

//Load bootstrap style via npm
@import '../../node_modules/bootstrap/scss/bootstrap';

//don't forget this
@import "../../node_modules//dist/[theme]/bootswatch";

[SimonPadbury]

All this is good. Can you put it in the Wiki?

https://github.com/SimonPadbury/b4st/wiki

[kLOsk]

sure thing. Not very polished, but here you go: https://github.com/SimonPadbury/b4st/wiki/How-to-enable-Bootstrap-variable-overriding-with-b4st-3.0---bootswatch

@SimonPadbury i'd assume you were planning to add this into core sooner or later anyways, now that scss is added in the theme? is there a roadmap for this project btw. I recently switched from foundationpress and like how this project does not try to solve every problem, like for example sage does, but covers the basics for modern theme development, like scss.

[SimonPadbury]

Thankyou Daniel. I wanted you to add it to the wiki so that you get the kudos, as being the author.

[kLOsk]

@SimonPadbury i understand no worries, but what I meant was if you were planning to add this into the project code at some point. Since bootstrap is rather annoying to modify without having access to the scss variables and I guess most users of this project modifying the default styling anyways?

[nicogaldo]

Great tutorial! but when I upload the site to the server I would have to include the node_modules folder, just because of bootstrap. Any way to avoid this? The folder weighs 50mb more than it should.

[kLOsk]

@nicogaldo instead of using the npm installed bootstrapped you could simply go and download bootstrap from the boostrap site (you need the non compiled version / source files: https://github.com/twbs/bootstrap/archive/v4.4.1.zip) and add the files to your theme folder. then adjust the references for the .js and import scss like so:

//enqueues.php
wp_register_script('bootstrap-js', get_template_directory_uri() . '/bootstrapfolderinyourtheme/bootstrap/dist/js/bootstrap.min.js', false, '4.4.1', true);

//b4st.scss
@import '../../bootstrapfolderinyourtheme/bootstrap/scss/bootstrap';